html - 使用推拉设置页面网格

Question

我正在使用 Bootstrap，但在设置网格时遇到了问题。我如何使用 bootstrap 的推/拉来设置我的列，如下所示？

这就是我目前所得到的，

<div class="row">
   <div class="col-xs-5 col-sm-3 col-md-3">A</div>
   <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div>
   <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div>
</div>

Answer 1

1. 确保您没有在类属性中添加句点 (.)。

2. 使用推/拉时，您需要将列从它们通常所在的位置偏移。将它们向左或向右移动不会改变它们在文档流中的基本顺序。

所以你可以这样做:

<div class="row">
  <div class="col-xs-5  col-sm-3  col-md-3"              >A</div>
  <div class="col-xs-7  col-sm-9  col-md-2 col-md-push-7">B</div>
  <div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2">C</div>
</div>

堆栈片段中的演示:

.green  { background: #A3D7C3; }
.red    { background: #EF453A; }
.yellow { background: #FDBE2D; }

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">

  <h2> Normal </h2>
  <div class="row">
    <div class="col-xs-5  col-sm-3  col-md-3 green">A</div>
    <div class="col-xs-7  col-sm-9  col-md-2 red">B</div>
    <div class="col-xs-12 col-sm-12 col-md-7 yellow">C</div>
  </div>
  
  <h2> Push / Pull </h2>
  <div class="row">
    <div class="col-xs-5  col-sm-3  col-md-3               green">A</div>
    <div class="col-xs-7  col-sm-9  col-md-2 col-md-push-7 red">B</div>
    <div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2 yellow">C</div>
  </div>

</div>