Добавить margin-bottom ко всем элементам столбца

Question

В проекте bootstrap 3 мне нужны некоторые границы вокруг cols, поэтому я сделал следующий css Fiddle.

.admin-div{ 

    background-color: #fff; 
    border-radius: 7px; 
    border: 1px solid #ccc; 
    padding:20px; 
} 

Когда я использую его я помещаю его в седловине как:

<div class="col-md-6 col-sm-8"> 
    <div class="admin-div"> 
    </div> 
</div> 

Это прекрасно работает на больших экранах, но на маленьких экранах нет маржи (примечания: самых левой оленьей кожи есть настраиваемый класс admin-div и группа по умолчанию - по умолчанию).

Большой экран (хорошие поля beteween цв-х)

Малый экран (нет разницы между цв-х)

Один вариантов добавить

margin-bottom:20px 

для всех элементов sm и sx, но это звучит немного излишне.

я мог бы использовать

@media (max-width: 970px) { .spacing-div{ margin-bottom: 20px; } } 

Но чем я должен добавить дополнительный класс для всех дивы, где у меня есть седловины.

Итак, у меня есть два решения, но они оба чувствуют, что их можно заменить чем-то намного более легким. Каков наилучший способ сделать все кол-во имеют нижнюю границу: 20px; даже на маленьких экранах?

Дополнительный админ-div только для того, чтобы показать проблему, без дополнительного div у меня все еще будет проблема, но она не будет видна так много.

Answer 1

Если вы хотите получить маржу абсолютно в каждом столбце в Bootstrap, вы можете использовать следующий CSS-селектор, который добавит маржу к каждому элементу, содержащему col-.

[class*=col-] { 
    margin-bottom: 20px; 
} 

Вы также можете использовать [class^=col-], в котором первый класс на элемент должен начался с col-.

Чтобы расширить это, вы можете использовать медиа-запрос, чтобы он применялся только к определенному размеру экрана.

[class*=col-] { 
    margin-bottom: 20px; 
} 
@media (min-width: 500px) { 
    [class*=col-] { 
     margin-bottom: 0; 
    } 
} 

Если вы не хотите, чтобы маржа на каждом отдельном столбце, я бы включил вышеперечисленное с помощью селектора модификаторов.

<div class="row modifier"> 
    <div class="col-6-md"></div> 
    <div class="col-6-md"></div> 
</div> 

/* fairly general - all columns in .modifier */ 
.modifier [class*=col-] { 
    margin-bottom: 20px; 
} 
/* a little more specific - only .col-md-6 columns in .modifier */ 
.modifier [class*=col-md-6] { 
    margin-bottom: 20px; 
}