如何访问引导网格系统中的某些列?
在引导网格系统中，有 12 列，col - *- * 类用于将一定数量的列组合在一起.但是当我想使用前 3 列，然后只使用最后一列时，我该怎么做，也就是说，如何在单行类中使用某些列而不是其他列?
In the bootstrap grid system, there are 12 columns and col - *- * class is used to group together certain number of columns. But when I want to use the first 3 columns and then just the last column how do I do that, that is, how can I use certain columns and not others in a single row class?
就像我制作页眉时一样，我在左侧给出标题，在页眉右侧给出某些其他文本，我假设我可以在这里有效地使用网格系统，因为我可以访问某些列.
Like when I make a page header, I give the title on the left hand side and certain other text on the right side of the header, I assume I can use the grid system here effectively, given that I can access certain columns.
推荐答案
使用 .offset-* 类(.col-md-offset-* 类适用于早于 4.0.0 的版本).比如占用前 4 列，只占用后 2 列如下:
Use the .offset-* class (.col-md-offset-* class for versions older than 4.0.0). For instance, occupy first 4 cols, and only the last 2 cols as follows:
<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>
引导 v4.0.0-alpha.6
.b { background: #CCC; height: 80px; }<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; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="b col-xs-4"></div>
<div class="b col-xs-offset-6 col-xs-2"></div>
</div>
</div>相关文章