Twitter bootstrap Bootstrap3中的列排序-推拉

使用Bootstrap3，我对列顺序的推/拉有一些疑问。以下是我想要的：

我有以下代码：

<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>

第1栏
第2栏
第3栏
紫色的盒子。
橙色的盒子。

---

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

我猜你得到了奇怪的结果，因为你的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>

紫色的盒子。
第1栏
第2栏
第3栏
橙色的盒子。

---

这是，well类只是为了直观地显示边界。唯一的问题是在第一种情况下获得2-2-2-4-2宽度，因为子列必须添加到12。相反，我使用了（（4-4-4/5）-7/10）-2。如果您真的需要2-2-2-4-2，那么您可能必须创建自己的css类。

我猜您会得到奇怪的结果，因为您的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>

紫色的盒子。
第1栏
第2栏
第3栏
橙色的盒子。

---

这是，well类只是为了直观地显示边界。唯一的问题是在第一种情况下获得2-2-2-4-2宽度，因为子列必须添加到12。相反，我使用了（（4-4-4/5）-7/10）-2。如果您真的需要2-2-2-4-2，那么您可能必须创建自己的css类。

@kalhartt将是正确的，请参阅：。您应该为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:

---

因为在make-grid（）和

make-grid-columns float中使用了这组
@grid columns
，所以不能同时编译两个网格。另请参见：
@kalhartt将是正确的，请参见：。您应该为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:

因为在make-grid（）和
make-grid-columns float中使用了这组
@grid columns
，所以不能同时编译两个网格。另请参见：
在某些浏览器上，div的dom顺序可能会导致奇怪的效果。尝试在dom中比其他同级更早地编写紫色框。
在某些浏览器上，div的dom顺序可能会产生奇怪的效果。尝试在dom中比其他同级更早地编写紫色方框。
谢谢Bass。有一个问题，你知道为什么在手机上查看时，页面的宽度太宽（需要水平滚动？）。在桌面浏览器和平板电脑上观看时，无论是纵向还是横向，它都是完美的，但在移动设备上，它比浏览器的宽度要宽。请参阅示例。乍一看，
col-xs-2
（您的右栏）似乎太小，无法容纳您的文本。文本不换行，所以你会得到一个烤饼条。谢谢Bass。有一个问题，你知道为什么在手机上查看时，页面的宽度太宽（需要水平滚动？）。在桌面浏览器和平板电脑上观看时，无论是纵向还是横向，它都是完美的，但在移动设备上，它比浏览器的宽度要宽。请参阅示例。乍一看，
col-xs-2
（您的右栏）似乎太小，无法容纳您的文本。文本不换行，因此您将获得一个滚动条。