bootstrap的网格系统的一行12列有必要填满吗？

Posted 2023-02-22

【中文标题】bootstrap的网格系统的一行12列有必要填满吗？

【英文标题】：It is necessary to fill all 12 columns of a row of bootstrap's grid system?

【发布时间】：2016-09-20 12:29:33

【问题描述】：

需要填满一行的所有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 是一种好的做法。

【参考方案1】：

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

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

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

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

【参考方案2】：

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

如果您不想使用列左侧的空间，请使用偏移列类。如果您不想使用列右侧的空间，请将列设置为您需要的宽度。只要您在.row 中执行此操作就可以了。

在下面的示例中，我没有使用 12 列中的 4 列。我们使用偏移量来 "ignore" 左侧的两列，并将列设置为 8 而不是 10 以 "ignore" 右侧的两列。这有效地使 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>