Question

我有一个我想创建的Bootstrap布局，但我无法弄清楚如何实现它。基本上，在桌面大小上，布局将按顺序依次为4列，6列和2列，然后移动我希望4列和2列保持在每个列的旁边其他和6列下降。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-sm-4">
      A
    </div>
    <div class="col-sm-6">
      B
    </div>
    <div class="col-xs-4 col-sm-2">
      C
    </div>
    <div class="clearfix"></div>
  </div>
</div>

＆＃13;

所以在手机上我想要＆＃34; A＆＃34;和＆＃34; C＆＃34;内联和＆＃34; B＆＃34;是一个完整的12列＆＃34; A＆＃34;和＆＃34; C＆＃34;

Answer 1

你可以通过普通的bootstrap推拉来完成它，而不需要依赖绝对定位。请参阅此处的bootstrap文档：http://getbootstrap.com/css/#grid-column-ordering

使用.col-md-push- *和.col-md-pull- *修饰符类轻松更改内置网格列的顺序。

Answer 2

你可以尝试这样的事情： - 只要这个容器相对有意义，它应该没问题。

https://jsfiddle.net/znwsk6fw/

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-sm-4">
      A
    </div>
    <div class="col-sm-6 col-md-6 col-xs-12 ">
      B
    </div>
    <div class="col-xs-4 col-sm-2 col-md-2 column_c">
      C
    </div>
    <div class="clearfix"></div>
  </div>
</div>

@media screen and (max-width:768px) {
  .column_c {
    position:absolute;
    right:0;
  }
}

如何实现这个Bootstrap布局？

2 个答案: