如何访问引导网格系统中的某些列? [英] How do I access certain column in bootstrap grid system?

问题描述

在引导网格系统中，有 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>

这篇关于如何访问引导网格系统中的某些列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！