Есть границы на внутренней стороне бутстраповских колонн только

У меня есть набор из четырех coloumns так:Есть границы на внутренней стороне бутстраповских колонн только

<div class="container-fluid" id="skills"> 
    <div class="row"> 
     <div class="col-md-3 col-xs-6 border"> 
      <i class="fa fa-terminal"></i> 
      <br> 
      Linux 
     </div> 
     <div class="col-md-3 col-xs-6 border"> 
      <i class="fa fa-html5"></i> 
      <br> 
      HTML5 
     </div> 
     <div class="col-md-3 col-xs-6 border"> 
      <i class="fa fa-cogs"></i> 
      <br> 
      Teamwork 
     </div> 
     <div class="col-md-3 col-xs-6"> 
      <i class="fa fa-bullhorn"></i> 
      <br> 
      Communication 
     </div> 
    </div> 
</div>

CSS является:

#skills #border { 
    border-right: 1px solid #ddd; 
}

Это дает: this

Однако, когда экран изменен до 768px (xs), он выглядит как this.

Что делать, если у него есть границы только внутри столбцов?

источник

2014-12-30 Thomas Carroll

В идеале это будет выглядеть как [this] (http://i.imgur.com/3Ctxhyq.png) –

jsfiddle: http: // jsfiddle.net/xedtvb1b/ –

, если вы хотите иметь меньше имен классов и иметь возможность использовать его в течение более 4 пунктов, которые Вы можете использовать это.

#skills .border:not(:first-child){ 
    border-left: 1px solid #ddd; 
} 
@media (max-width: 992px){ 
    #skills .border:nth-child(odd){ 
     border-left: none; 
    } 
    #skills .border:nth-child(n+3){ 
     border-top: 1px solid #ddd; 
    } 
}

HTML:

<div id="skills" class="row"> 
    <div class="col-md-3 col-xs-6 border" > 
     <i class="fa fa-terminal"></i> 
     <br> 
     Linux 
    </div> 
    <div class="col-md-3 col-xs-6 border" > 
     <i class="fa fa-html5"></i> 
     <br> 
     HTML5 
    </div> 
    <div class="col-md-3 col-xs-6 border"> 
     <i class="fa fa-cogs"></i> 
     <br> 
     Teamwork 
    </div> 
    <div class="col-md-3 col-xs-6 border"> 
     <i class="fa fa-bullhorn"></i> 
     <br> 
     Communication 
    </div> 
</div>

Fiddle

источник

2014-12-30 12:14:00 Taxellool

Хорошо работает, не знал о ': not (: first-child)' –

Неверное использование идентификатора #border. ID не может повторяться согласно правилам HTML.

Вы должны использовать класс, если хотите использовать его несколько раз.

HTML

<div class="row"> 
    <div class="col-md-3 col-xs-6 border" > 
     <i class="fa fa-terminal"></i> 
     <br> 
     Linux 
    </div> 
    <div class="col-md-3 col-xs-6 border" > 
     <i class="fa fa-html5"></i> 
     <br> 
     HTML5 
    </div> 
    <div class="col-md-3 col-xs-6 border"> 
     <i class="fa fa-cogs"></i> 
     <br> 
     Teamwork 
    </div> 
    <div class="col-md-3 col-xs-6"> 
     <i class="fa fa-bullhorn"></i> 
     <br> 
     Communication 
    </div> 
</div>

CSS

#skills .border { 
    border-right: 1px solid #ddd; 
}

Demo

EDIT: Согласно вашей потребности (как указано в комментариях).

HTML

<div class="row"> 
    <div class="col-md-3 col-xs-6 border-right" > 
     <i class="fa fa-terminal"></i> 
     <br> 
     Linux 
    </div> 
    <div class="col-md-3 col-xs-6 " > 
     <i class="fa fa-html5"></i> 
     <br> 
     HTML5 
    </div> 
    <div class="col-md-3 col-xs-6 border-top border-right"> 
     <i class="fa fa-cogs"></i> 
     <br> 
     Teamwork 
    </div> 
    <div class="col-md-3 col-xs-6 border-top"> 
     <i class="fa fa-bullhorn"></i> 
     <br> 
     Communication 
    </div> 
</div>

CSS

#skills .border-right { 
    border-right: 1px solid #ddd; 
} 
#skills .border-top { 
    border-top: 1px solid #ddd; 
}

Demo

источник

2014-12-30 10:52:50

Спасибо, я отредактировал свой HTML и CSS, чтобы соответствовать этому. –

@ThomasCarroll Работает ли он сейчас? –

С самого начала работала с HTML, проблема заключается в меньшем размере экрана, чтобы получить границу, чтобы отобразить ее больше [this] (http://i.imgur.com/3Ctxhyq.png) –

Хорошо, это исправил с некоторыми СМИ опрашивает jsfiddle

Медиа запрос

@media (min-width: 992px) { 
    #skills .border-right-md { 
     border-right: 1px solid #ddd; 
    } 
    #skills .border-top { 
     border-top: none; 
    } 
}

источник

2014-12-30 11:53:08

Если вы хотите динамический с меньшим количеством кода CSS, попробовать это

.border{ 
    padding: 40px; 
    border-bottom: 1px solid #CCC; 
    border-right: 1px solid #CCC; 
} 

/*xs*/ 
@media(max-width:767px){ 
    .border{ 
     border-right: none; 
    } 
} 

/*sm*/ 
@media(max-width:991px){ 
    .border:nth-child(2n){ 
     border-right: none; 
    } 
} 

/*md*/ 
@media(min-width:992px){ 
    .border:nth-child(4n){ 
     border-right: none; 
    } 

}

Check Demo Здесь https://jsfiddle.net/adratarek/q8kec8xb/4/

источник

2016-08-12 13:55:49

Есть границы на внутренней стороне бутстраповских колонн только

ответ

Смежные вопросы