Bootstrap：在列之间添加间距

Question

我是引导程序新手，正在尝试弄清楚如何在

row-fluid

中的第二个

container-fluid

中的框之间放置间距。我正在尝试使用

class="col-lg-4 col-md-6 item col-xs-12"

，这样我的页面将在较大屏幕上显示三列，在平板电脑上显示两列，在移动设备上显示一列。

我开发了以下 bootply 来演示我陷入困境的地方：

bootply 示例

这个示例有两行，我想在 col1、col2、col3 框之间添加间距。

我尝试在

margin-left= 4px;

css 中添加

#col1

，但这似乎使 col3 卡在 col1 以下。

Answer 1

我想再建议一种解决方案。

在每个 #col1 中添加额外的 div：

    <div class="container-fluid">
  <div class="row-fluid">
    <div id="start" class="span12">

        Line1<br>
        Line2<br>
    </div>
  </div>
  <div calss="row-fluid">
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col1 </div></div>
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col2 </div></div>
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col3 </div></div>
  </div>

并将 col1 的子样式添加到您的 css

#start {
  background-color: #f1f2f6;
  margin-bottom:8px;
}

.col1 {
  background-color: #f1f2f6;
  margin-bottom: 4px;
}

.col-inside {
  border: solid 2px #000000;

}
.col1:first-child {
  padding: 0 4px 0 0;
}
.col1:nth-child(2) {
  padding: 0 4px;
}
.col1:last-child {
  padding: 0 0 0 4px;
}

仅当有 3 列时，第一列的左边距为 4px 和 0px，最后一列的左边距为 4px，中间列的左右边距为 4px。 这是 bootply 链接

Answer 2

你的意思是偏移列???

您可以使用 col-md-offset-* 类来完成此操作。例如：

<div class="row">
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>