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

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所以真的没关系。如果使用列换行，其中每行中的 col 个单位可能超过 12，则需要占位符col-sm-10。

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

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

"不需要使用所有 12 个可用列"

Answer 2

No.您可以使用 Bootstrap 的偏移列。

如果不想使用列左侧的空格，请使用偏移列类。如果不想使用列右侧的空格，请将列设置为所需的宽度。只要你在.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>