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

Question

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

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

Answer 1

对于早于4.0.0的版本，请使用.offset-*类（.col-md-offset-*类）。例如，占用前4个cols，只占最后2个cols，如下所示：

<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

.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>

Bootstrap v3.3.7

.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>

Answer 2

与col-md-offset - *。

一起使用 像这样

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

Answer 3

首先创建3列，然后创建8列，之后创建最后一列，并且只在前三列和最后一列中编写代码。把它想象成图表。

<div class="col-md-3">
<!-- things you want in first three columns: code here-->
</div>
<div class="col-md-8">
<!-- leave this blank-->
</div>
<div class="col-md-1">
<!-- things you want in last column : code here-->
</div>

Answer 4

如果您希望三列彼此相邻并且只使用最后一列，您只需将内容放入最后一列，如下所示：

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4">Content here</div>
</div>

Answer 5

您必须在bootstrap中使用.col-[xs|md|lg|xl]-offset-*类，请参阅here

例如，如果您希望页面的布局只包含前3列，而最后一列包含元素，则：

<div class="row">
    <div class="col-md-3">
        <span>some text</span>
    </div>
    <div class="col-md-offset-8 col-md-1">
        <span>some more text</span>
    </div>
</div>

Answer 6

如果我正确理解了您的问题，您希望能够在12行中单独列出特定列。

<div class='row'>
  <div id='first' class='col-sm-4'>
    <p>Column 1</p>
  <div>
  <div id='second' class='col-sm-4'>
    <p>Column 2</p>
  <div>
  <div id='third'class='col-sm-4'>
    <p>Column 3</p>
  <div>
</div>

如果要选择特定列，可以为它们提供唯一标识它们的ID。如果您想要选择第一列和第三列并将其背景颜色更改为浅蓝色，则可以执行以下操作：

#first, #third{
background-color: lightblue;

}

Answer 7

<div>
<div class="col-md-3" style="text-align:left">
    <h1>Title</h1>
</div>
 <div class="col-md-3"></div>
 <div class="col-md-3"></div>
 <div class="col-md-3" style="text-align:right">
       <p>Description</p>
 </div>

Answer 8

考虑到你提到：

  

但是当我想使用前3列然后只是最后一列时   我如何做到这一点，也就是说，我如何使用某些列和   单行上没有其他人？

同时

  

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

在你的情况下不需要.col-offset使用，实际上我没有看到你明确表明你想要/需要偏移cols的位置，你可以用常规的col-*类做到这一点（在元素上使用的类别也少一个。）

.col-offset设置为生成内容的视觉偏移，您不需要偏移以影响网格中的最后一列，您可以将未使用的列留空：

.col-xs-3 {
  background: lightgray;
  height: 300px;
}
.col-xs-8 {
  /* set backgroung either white o transparent */
  background: transparent;
}
.col-xs-1 {
  background: lightgray;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-8"></div>
    <div class="col-xs-1"></div>
  </div>
</div>

偏移示例：

.col-xs-3,
.col-md-3 {
  background: lightgray;
  height: 300px;
}
.col-xs-2 {
  background: yellow;
  height: 300px;
}
.col-xs-1,
.col-md-1 {
  background: lightgray;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-2 col-xs-offset-6">Offset stuff</div>
    <div class="col-xs-1"></div>
  </div>
</div>