Question

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

我开发了以下bootply来演示我遇到的问题：

bootply example

此示例有两行，我想在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;
}

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

Answer 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>

Bootstrap：在列之间添加间距

2 个答案: