如何访问引导网格系统中的某些列？

Question

在 bootstrap 网格系统中，有 12 列， col - *- * 类用于将一定数量的列组合在一起。但是当我想使用前 3 列然后只使用最后一列时，我该怎么做，也就是说，如何在单行类中使用某些列而不是其他列？

就像我制作页眉时，我在左侧给出标题，在页眉右侧给出某些其他文本，我假设我可以在这里有效地使用网格系统，因为我可以访问某些列。

Answer 1

使用.offset-*类（.col-md-offset-*4.0.0 之前版本的类）。例如，占用前 4 列，只占用后 2 列，如下所示：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 offset-md-6">.col-md-6 .offset-md-2</div>
</div>

Bootstrap v4.0.0-alpha.6

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 offset-md-6">.col-md-6 .offset-md-2</div>
</div>

.b { background: #CCC; height: 80px; }

引导程序 v3.3.7

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="b col-sm-4"></div>
    <div class="b offset-sm-6 col-sm-2"></div>
  </div>
</div>

.b { background: #CCC; height: 80px; }