0

我需要使用 Bootstrap 3.0 创建一个网格布局，列之间有空格。我正在使用宽度为 3 的一行和 4 个列。但是，它们都一起出现，中间没有任何空格。我怎么能这样做？

例子：

<div class="row">
  <div class="col-lg-3" style="background-color: grey;">
    col1
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col2
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col3
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col4
  </div>
</div>
4

2 回答 2

1

经过与@ShaharGalukman 的讨论，Bootstrap 3.0 似乎本身并不支持此功能。所以，我所做的是：

使用 Bootstrap 3.0 语法与所有列一起创建网格。然后，我没有为 div 设置背景颜色，而是在每个coldiv 中创建了一个包含该设置的新颜色。这样你就有了列之间的划分。您可以使用新 div 的调整空白。设置 a在列之间不留空格。divcolbackground-colormarginmargin: -15px

希望这对其他人有帮助！

<div class="row">
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col1
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col2
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col3
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col4
    </div>
  </div>
</div>
于 2013-08-16T21:04:51.707 回答
1

我从未使用或听说过 boostrap 类“col-lg-3”。我使用“spanX”，其中 X 是 12 列网格中的列数。

<div class="row">
  <div class="span3" style="background-color: grey;">
    col1
  </div>
  <div class="span3" style="background-color: grey;">
    col2
  </div>
  <div class="span3" style="background-color: grey;">
    col3
  </div>
  <div class="span3" style="background-color: grey;">
    col4
  </div>
</div>
于 2013-08-16T20:26:34.527 回答