将 margin-bottom 添加到所有列元素

Question

在 bootstrap 3 项目中，我想要一些围绕 cols 的边框，所以我制作了以下 css Fiddle。

.admin-div{

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

当我使用它时，我将它放在一个 col 中，例如：

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

这在大屏幕上运行良好，但在小屏幕上没有边距（注意：最左边没有自定义 admin-div 类并且是默认列表组）。

大屏幕（列之间的边距很好）

小屏幕（列之间没有边距）

一个选项是添加

margin-bottom:20px 

对所有 sm 和 sx 元素，但这听起来有点矫枉过正。

我可以使用

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

但是我必须在我有 col 的所有 div 中添加一个额外的类。

所以我有两个解决方案，但他们都觉得可以用更简单的东西代替。 最好的制作方法是什么 所有 col 的都有一个 margin-bottom :20px;即使在小屏幕上？

额外的 admin-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;
}