html - Bootstrap 3 如何为特定行分配独特的装订线宽度？

Question

我正在使用 Bootstrap 3 来构建我的个人网站，并且一直在寻找一种方法来执行以下操作：

我想为布局中的特定行分配唯一的装订线宽度。

网站的其余部分将使用底层的装订线宽度。可能吗？任何帮助将非常感激。提前致谢/Trev

Answer 1

更改列间距（gutter）的最简单方法是使用 CSS 覆盖默认填充（15px）。

.row .col:not(:first-child),.row .col:not(:last-child) {
  padding-right:5px;
  padding-left:5px;
}

演示：http ://bootply.com/94849

Answer 2

是的。添加一个独特的 CSS 类，比如my-personalized-row要编辑的行。然后在您的 CSS 中，为此添加一个部分，如下所示：

.my-personalized-row {
    margin-bottom: 5px !important; //If you want 5px of gutter width.
}

现在，您在两个大括号之间放置的任何内容都将仅适用于该行，站点的其余部分将使用底层的装订线宽度。

更新：

我添加了样式规则，您可以使用该规则将特定行的装订线宽度减小到 5px。这!important是为了确保特异性规则不会干扰您的声明。请注意，它不是强制使用的，!important因为 Bootstrap 也使用单个类声明样式。