Bootstrap：在列之间添加间距答案

【问题标题】：Bootstrap: add spacing between columnsBootstrap：在列之间添加间距
【发布时间】：2014-12-02 17:42:32
【问题描述】：

我是 bootstrap 的新手，正在尝试弄清楚如何在 container-fluid 中的第二个 row-fluid 中的框之间放置间距。我正在尝试使用class="col-lg-4 col-md-6 item col-xs-12"，因此我的页面将在大屏幕上显示三列，在平板电脑上显示两列，在移动设备上显示一列。

我开发了以下引导程序来演示我遇到的问题：

bootply example

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

我尝试在#col1 css 中添加margin-left= 4px;，但这似乎会使 col3 卡在 col1 以下。

【问题讨论】：

标签： html css twitter-bootstrap fluid-layout

【解决方案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;
}

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

【讨论】：

Ids 应该是唯一的，在 html 页面中。如果你想对多个元素应用一些 CSS 规则，你必须使用类。
你当然是对的。疯狂的混乱。但问题是关于差距。我已更改代码。

【解决方案2】：

你的意思是offsetting collumns???

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

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

【讨论】：

我不想偏移一些列，而是 4px。我不确定是否需要更改 bootstrap.css 中的某些内容，或者是否需要为它编写自己的 CSS。
我相信偏移类对元素做了一个margin-left，所以你可以做类似的事情。也许创建一个类 .myOffset { margin-left: 4px; } 并将其分配给元素，或者您可以通过执行类似 #anId .col-md-offset-4{ margin-left: 4px; }
基本上你可以自己覆盖bootstrap css
谢谢，我会看看能不能让它工作。