8

有必要填满一行的所有 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。

4

2 回答 2

4

既然你要添加一个新的row，那真的没关系。如果您使用的是列换行，其中col每行中的单位可能超过 12，您将需要 placeholder col-sm-10。

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

IMO，第一个是首选，因为它需要较少的标记。此外，如果您要嵌套列，则文档特别声明..

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

于 2016-05-23T14:56:31.057 回答
3

不，您可以使用 Bootstrap 的偏移列。

如果您不想使用列左侧的空间，请使用偏移列类。如果您不想使用列右侧的空间，请将列设置为您需要的宽度。只要你这样做，.row你应该没问题。

在下面的示例中，我没有使用 12 列中的 4 列。我们使用 offset 来“忽略”左侧的两列，并将列设置为 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>

于 2016-05-23T14:56:47.963 回答