Question

有必要填写一行的所有12列吗？

示例1 - 声明行中总共12行中只有2列：

<div class="container">
  <div class="row">
    <div class="col-sm-2">
      ...
    </div>
  </div>
</div>

示例2 - 也声明了未使用的列：

<div class="container">
  <div class="row">
    <div class="col-sm-2">
      ...
    </div>
    <div class="col-sm-10"></div>
  </div>
</div>

浏览器可以通过不同方式扩展2示例吗？ 我倾向于认为一个好的做法是示例2。

Answer 1

由于您要添加新row，因此无关紧要。如果您使用column wrapping，每行col个单位可能超过12个，则需要占位符col-sm-10。

http://www.codeply.com/go/D1RLpfT8pD

IMO，第一个是首选，因为它需要更少的标记。此外，如果您将列docs specifically state ..

嵌套

“您不需要使用所有12个可用列”

Answer 2

没有。您可以使用Bootstrap的offset columns。

如果您不想使用列左侧的空格，请使用偏移列类。如果您不想使用列右侧的空间，请将列设置为您需要的宽度。只要你在.row中这样做就可以了。

在下面的示例中，我没有使用12列中的4列。我们在左侧使用偏移量“忽略”两列，并将列设置为8而不是10到“忽略”右侧的两列。这有效地将DIV集中在一行中。无需额外标记。在桌面视口上试用。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );

.container {
  border: 1px dashed red;
}
.col-md-offset-2 {
  border: 1px dashed blue;
}

<div class="container">
  <div class="row">
  
    <div class="col-md-offset-2 col-md-8">
      I am a 8 column DIV.
    </div>
  </div>
</div>

有必要填充一行bootstrap网格系统的所有12列？

2 个答案: