1

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

在此处输入图像描述

我有这个代码：

<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 的紫色框并推送到三列，它会产生奇怪的结果。有人可以告诉我我错过了什么吗？

4

3 回答 3

4

@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);
}

导致@grid-columns在 make-grid() 中使用了这个集合，make-grid-columns-float你不能一次编译两个网格。另见：https ://github.com/twbs/bootstrap/issues/11322

于 2013-11-01T09:31:25.593 回答
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， well 类只是为了直观地显示边界。唯一的问题是在第一种情况下获得 2-2-2-4-2 宽度，因为子列必须添加到 12。相反，我使用 ((4-4-4 of 5)-7 of 10)- 2. 如果您真的需要 2-2-2-4-2，那么您可能必须制作自己的 css 类。

于 2013-10-31T21:58:35.863 回答
0

在某些浏览器上，div 的 dom 顺序可能会导致奇怪的效果。尝试在 dom 中比其他兄弟更早地编写紫色框。

于 2015-05-30T18:15:46.330 回答