使行沟槽间距与列间距相同

Question

在bootstrap上我试图制作3x3网格。

我希望行之间的间距与列之间的间距相同。

实现这一目标的最佳方法是什么？

Answer 1

根据Bootstrap Docs a柱的沟槽宽度为30px，每边15px。

你可以定义一个css类

.row-gutter
{
    margin-top: 15px;
    margin-bottom: 15px;
}

然后将其作为额外的类添加到您的行

<div class="row row-gutter"> 

Answer 2

我更喜欢不弄乱核心布局样式，因为它可能会对其他组件产生不良影响。相反，将保证金放在内容上：

.row > div > div { /* column children */
    margin-bottom: 15px;
}

Answer 3

我会使用border属性来混淆Bootstrap提供的网格系统。

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
  </div>
  <div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
  </div>
  <div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
  </div>
</div>

CSS

.container {
  background-color: yellow;
}
.row:nth-child(2) {
  border-top: 5px solid red;
  border-bottom: 5px solid red;
}
.col-xs-4:nth-child(2) {
  border-left: 5px solid red;
  border-right: 5px solid red;
}

它会产生preview。