Question

我的布局看起来像这样：

http://www.bootply.com/hKqgubV4t2

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-lg-2"><div class="well">1</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">2</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">3</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">4</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">5</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">6</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">7</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">8</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">9</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">10</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">11</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">12</div></div>
  </div>
</div>

我希望大屏幕看起来像这样：

[ 1][ 2][ 3][ 4][ 5][ 6]
[ 7][ 8][ 9][10][11][12]

这适用于xs-md：

[ 1][ 2][ 3][ 4]
[ 7][ 8][ 9][10]
[ 5][ 6][11][12]

问题是，当我尝试添加推送和拉动时，我得到这样的东西：

http://www.bootply.com/ysafNpFpsL

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-lg-2"><div class="well">1</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">2</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">3</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">4</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-push-12 col-lg-push-0"><div class="well">5</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-push-12 col-lg-push-0"><div class="well">6</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">7</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">8</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">9</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">10</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">11</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">12</div></div>
  </div>
</div>

结果：

        [ 1][ 2][ 3][ 4]
        [ 7][ 8]        [ 5][ 6]
[ 9][10]        [11][12]

因此，推动和拉动不会导致div包裹到下一行，只需将它们推到更远的位置即可。有没有办法对这些行中的列重新排序？

Answer 1

您可以将行分为两列（宽度8和宽度4），如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="col-xs-3 col-lg-3"><div class="well">1</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">2</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">3</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">4</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">7</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">8</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">9</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">10</div></div>  
    </div>
    <div class="col-md-4">
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">5</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">6</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">11</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">12</div></div>
    </div>
  </div>
</div>

跨行重新排序Bootstrap 3列

1 个答案: