bootstrap的网格系统一行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，那真的没关系。如果您使用 column wrapping，其中每行中的 col 单位可能超过 12，则您需要占位符 col-sm-10.

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

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

"it is not required that you use all 12 available columns"

Answer 2

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

如果您不想使用列左侧的 space，请使用偏移列类。如果您不想在列的右侧使用 space，请将列设置为您需要的宽度。只要您在 .row 中执行此操作，就应该没问题。

在下面的示例中，我没有使用 12 列中的 4 列。我们使用 "ignore" 左侧两列的偏移量，并将列设置为 8 而不是 10 到 "ignore"[=28= 】右边两栏。这有效地使 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列全部填满？

It is necessary to fill all 12 columns of a row of bootstrap's grid system?

html

css

grid-system

twitter-bootstrap