Добавление столбцов border-bottom в динамический Бутстрап

Question

Я динамически создаю столбцы с помощью Bootstrap. У меня есть цикл, который создает следующие столбцы:

<div class="col-md-6 col-xs-12 inspection-category-col"> 
    <div class="media inspection-category"> 
    <div class="media-left"> 
     <a href="#"> 
     <img src="http://placehold.it/100x100"> 
     </a> 
    </div> 
    <div class="media-body inspection-category-media-body"> 
     <h3 class="media-heading inspection-category-media-heading">{{ item.title }}</h3> 
     <span class="inspection-category-media-content"> 
     {{ item.description }} 
     </span> 
    </div> 
    </div> 
</div> 

Я хочу, чтобы добавить границы между дном каждого столбца, но так как я не знаю, количество колонок мне нужно обрабатывать следующую логику:

if screen md/lg && count(cols) > 2 && not last one or two cols 
    add border-bottom 
else if screen xs && not last col 
    add border bottom 
else 
    do nothing 

Я не уверен, что это лучший способ справиться с этим. Идеально с помощью CSS, но я не уверен, как это сделать. Заранее спасибо.

Answer 1

Учитывая вашу логику, мы можем разбить это на более мелкие шаги.

Во-первых, размер экрана. Для этого мы используем запрос css media. Здесь я определяю, что большой экран имеет ширину более 600 пикселей, а маленький - не более 600 пикселей. вы можете изменить это в соответствии с вашими потребностями.

@media (min-width: 600px) { 
    /* large code here */ 
} 
@media (max-width: 600px) { 
    /* small code here */ 
} 

Тогда нам нужна пограничная логика, во-первых, для больших экранов. Здесь я предполагаю, что у всех есть класс myColumn.

.myColumn:nth-last-of-type(n+3) { 
    border-bottom:1px solid black 
} 

: п-й последней из-типа выбирает число в скобках суммы элементов от конца списка. п + 3 означает выбрать из 2-го элемента в списке, то есть, пропустить два затем выбрать третий элемент, начиная с конца, если они имеют класс MyColumn

использование

.myColumn:nth-last-of-type(n+2) { 
    border-bottom:1px solid black 
} 

для ваших маленьких экранов.

Вы можете возиться с селекторов более here

Вы можете прочитать больше о средствах массовой информации запросов here