Question

使用bootstrap 3我对列排序的推/拉有一些疑问。这就是我追求的目标：

enter image description here

我有这段代码：

<div class="col-xs-10 col-sm-3 col-md-2">
        Column 1
    </div>
    <div class="col-xs-10 col-sm-3 col-md-2">
        Column 2
    </div>
    <div class="col-xs-10 col-sm-3 col-md-2">
        Column 3
    </div>
    <div class="col-xs-10 col-sm-9 col-md-4">
        Purple box.
    </div>
    <div class="col-xs-2 col-sm-3 col-md-2">
        Orange box.
    </div>

如果我将pull修饰符类添加到sm / xs的紫色框并推送到三列，则会产生奇怪的结果。有人能告诉我我错过了什么吗？

Answer 1

@kalhartt是对的，请参阅：http://bootply.com/91310。您应该为10列网格定义一些网格类，以解决此问题2-2-2-4-2。

其他CSS：

@media (min-width: 992px) {
.col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9, .col-md10-10
{
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}   


  .col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9 {
    float: left;
  }
  .col-md10-10 {
    width: 100%;
  }
  .col-md10-9 {
    width: 90%;
  }
  .col-md10-8 {
    width: 80%;
  }
  .col-md10-7 {
    width: 70%;
  }
  .col-md10-6 {
    width: 60%;
  }
  .col-md10-5 {
    width: 50%;
  }
  .col-md10-4 {
    width: 40%;
  }
  .col-md10-3 {
    width: 30%;
  }
  .col-md10-2 {
    width: 20%;
  }
  .col-md10-1 {
    width: 10%;
  }
  .col-md10-pull-10 {
    right: 100%;
  }
  .col-md10-pull-9 {
    right: 90%;
  }
  .col-md10-pull-8 {
    right: 80%;
  }
  .col-md10-pull-7 {
    right: 70%;
  }
  .col-md10-pull-6 {
    right: 60%;
  }
  .col-md10-pull-5 {
    right: 50%;
  }
  .col-md10-pull-4 {
    right: 40%;
  }
  .col-md10-pull-3 {
    right: 30%;
  }
  .col-md10-pull-2 {
    right: 20%;
  }
  .col-md10-pull-1 {
    right: 10%;
  }
  .col-md10-push-10 {
    left: 100%;
  }
  .col-md10-push-9 {
    left: 90%;
  }
  .col-md10-push-8 {
    left: 80%;
  }
  .col-md10-push-7 {
    left: 70%;
  }
  .col-md10-push-6 {
    left: 60%;
  }
  .col-md10-push-5 {
    left: 50%;
  }
  .col-md10-push-4 {
    left: 40%;
  }
  .col-md10-push-3 {
    left: 30%;
  }
  .col-md10-push-2 {
    left: 20%;
  }
  .col-md10-push-1 {
    left: 10%;
  }
  .col-md10-offset-10 {
    margin-left: 100%;
  }
  .col-md10-offset-9 {
    margin-left: 90%;
  }
  .col-md10-offset-8 {
    margin-left: 80%;
  }
  .col-md10-offset-7 {
    margin-left: 70%;
  }
  .col-md10-offset-6 {
    margin-left: 60%;
  }
  .col-md10-offset-5 {
    margin-left: 50%;
  }
  .col-md10-offset-4 {
    margin-left: 40%;
  }
  .col-md10-offset-3 {
    margin-left: 30%;
  }
  .col-md10-offset-2 {
    margin-left: 20%;
  }
  .col-md10-offset-1 {
    margin-left: 10%;
  }
}

HTML：

<div class="container">
    <div class="row">
    <div class="col-md-10 col-sm-9 col-xs-10">
        <div class="row">
            <div class="col-md10-4 col-md10-push-6 col-xs-12" style="height:50px;background-color:#CA0088"></div>
            <div class="col-md10-6 col-md10-pull-4 col-xs-12">

                <div class="row">
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#A7A8AA"></div>
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#D0D1D3"></div>
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#E7E7E9"></div>     
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-2" style="height:50px;background-color:#E0922E"></div>
    </div>
</div>

请注意，目前无法使用Less构建额外的CSS。

第一部分.col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9, .col-md10-10 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }的列名是mixins.less中的硬代码（请参阅：https://github.com/twbs/bootstrap/issues/11321）

第二部分可以通过以下方式构建：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

@grid-columns: 10;
@media (min-width: @screen-md-min) {
  .make-grid-columns-float(md10);
  .make-grid(@grid-columns, md10, width);
  .make-grid(@grid-columns, md10, pull);
  .make-grid(@grid-columns, md10, push);
  .make-grid(@grid-columns, md10, offset);
}

导致make-grid（）和@grid-columns中使用的此集make-grid-columns-float无法编译两次网格。另见：https://github.com/twbs/bootstrap/issues/11322

Answer 2

我的猜测是你得到了奇怪的结果，因为你的div没有正确嵌套。一般的经验法则是任何一组都应该让所有的孩子都堆叠或并排而不是混合。鉴于此，请尝试以下方法：

<div class="col-xs-10 col-sm-9 col-md-10">
    <div class="well col-sm-12 col-md-7 col-md-push-5">
        Purple box.
    </div>
    <div class="col-sm-12 col-md-5 col-md-pull-7">
        <div class="well col-sm-4">
            Column 1
        </div>
        <div class="well col-sm-4">
            Column 2
        </div>
        <div class="well col-sm-4">
            Column 3
        </div>
    </div>
</div>
<div class="well col-xs-2 col-sm-3 col-md-2">
    Orange box.
</div>

这是fiddle，井类只是用于直观地显示边界。唯一的问题是在第一种情况下获得2-2-2-4-2宽度，因为子列必须加到12.而是我使用（（4-4-4 of 5）-7 of 10） - 2。如果你真的需要2-2-2-4-2，那么你可能需要制作自己的CSS课程。

Answer 3

在某些浏览器上，dom的顺序会导致奇怪的效果。尝试在dom中写下紫色框，而不是其他兄弟姐妹。

Bootstrap 3中的列排序 - 推拉

3 个答案: