如何访问 bootstrap 网格系统中的特定列？

Question

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

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

Answer 1

首先创建 3 列，然后创建 8 列，然后创建最后一列，然后您只在前三列和最后一列中编写代码，就像这样。把它想象成一个图表 sheet.

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

使用 .offset-* class（.col-md-offset-* class 用于早于 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

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

如果你想要三列并排并且只使用最后一列，你可以像这样简单地在最后一列中输入内容：

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

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

如果您想 select 特定的列，您可以给它们一个 ID 来唯一标识它们。如果您想 select 第一列和第三列并将它们的背景颜色更改为浅蓝色，您可以这样做：

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

如何访问 bootstrap 网格系统中的特定列？

How do I access certain column in bootstrap grid system?

html

css

frontend

twitter-bootstrap

Bootstrap v4.0.0-alpha.6

Bootstrap v3.3.7