使用推拉设置页面网格

Question

我正在使用Bootstrap，我在设置网格时遇到问题。如何使用bootstrap的push / pull设置我的列，如下所示？

这是我到目前为止所做的，

<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. 确保您没有在class属性中添加句点（.）。

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>

Stack Snippets中的演示：

＆＃13;
＆＃13;
.green  { background: #A3D7C3; }
.red    { background: #EF453A; }
.yellow { background: #FDBE2D; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;