Question

我刚刚在Bootstrap中发现了“push”和“pull”类，但是按照我喜欢的方式实现它们会遇到很多麻烦。在XS屏幕上，我的内容如下所示，这是正确的：

|A||B||C|

但是在SM屏幕上，我需要它：

|B|
|C|
|A|

我的HTML在下面。我尝试将“col-sm-push-10”添加到包含我的按钮的div中，但是它只是在它自己的div中向右推。我需要实际移动这个div。任何帮助将不胜感激!!

<div class="container-fluid">
    <div class="col-sm-4">
       <ul class="prod-group">
         <div class="col-xs-2 col-sm-10">
            <li><button type="button" class="btn">A</button></li>
          </div>
          <div class="col-xs-6 col-sm-10">
            <li>B</li>
           </div>
           <div class="col-xs-4 col-sm-10">
              <li>Cr</li>
           </div>
        </ul>    
     </div>

Answer 1

您应该按照要在-sm-上查看的顺序编写元素。然后调整他们在-xs - 的位置：

<div class="row">
    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        B
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        C
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-pull-8">
        A
    </div>     
</div>

顺便说一句，您应该仅将 li 用作 ul 的直接子项以及不使用 li 其他元素，例如 div 直接位于 ul 内，因为它无效。

Answer 2

通常你希望元素在xs屏幕上垂直堆叠，并且在较大（sm）屏幕上保持水平，所以这是一个不寻常的情况，你实际上想要相反。首先创建堆叠sm布局，然后使用推拉调整xs .. A-B-C on large。移动设备上的B-C-A。

<div class="container-fluid">
    <div class="row">
    <div class="col-sm-4">
        <ul class="row prod-group">
            <li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0">
                B
            </li>
            <li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0">
                C
            </li>
            <li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0">
                A
            </li>
        </ul>
    </div>
    </div>
</div>

演示 http://www.codeply.com/go/yMxh8sGwMZ

另外，不要忘记将列保留在row内以进行正确的填充。

使用推拉式Bootstrap更改cols的顺序

2 个答案: