Question

当我尝试为三种不同的屏幕尺寸指定列重新排序时，我遇到了Bootstrap列渲染的问题。

XS设备：

A
乙
C
d

SM和MD设备：

B A
D C

LG设备：

D C B A

我可以实现XS和LG模式或XS和MD模式，但遗憾的是并非所有三个选项同时出现。这可能与Bootstrap的类有关吗？

XS和LG的解决方案：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-3 col-lg-push-9">
            <div class="form-group">
                <label>Label1</label>
                <input type="text" class="form-control" />
             </div>
        </div>

        <div class="col-xs-12 col-lg-3 col-lg-push-3">
            <div class="form-group">
                <label>Label2</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-lg-3 col-lg-pull-3">
            <div class="form-group">
                <label>Label3</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-lg-3 col-lg-pull-9">
            <div class="form-group">
                <label>Label4</label>
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>
</div>

现在当我添加中间视图类时，所有这些都搞砸了。有没有办法解决这个问题？

<div class="container" style="background-color: pink">
    <div class="row">
        <div class="col-xs-12 col-md-6 col-md-push-6 col-lg-3 col-lg-push-9 col-lg-pull-0">
            <div class="form-group">
                <label>Label1</label>
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-md-6 col-md-pull-6  col-lg-3 col-lg-push-3 col-lg-pull-0">
            <div class="form-group">
                <label>Label2</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-md-6 col-md-push-6 col-lg-3 col-lg-pull-3 col-lg-pull-0">
            <div class="form-group">
                <label>Label3</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-md-6  col-md-pull-6 col-lg-3 col-lg-pull-9 col-lg-push-0">
            <p>empty</p>
        </div>
    </div>
</div>

以下代码是我最好的尝试，但它根本不起作用......有什么想法吗？

Answer 1

由于bootstrap首先是移动的，因此小视图类将作为较大视图的默认值。您只需要为要添加到中小类的结构添加col-sm-6。翻转你想要反转推动和拉动小班级的顺序，并取消它们为大。您可以使用jQuery更新大小以适应。

示例： https://jsfiddle.net/nprtkhh8/1/

<div class="container">
<div class="row">
    <div class="box col-xs-12 col-sm-6 col-sm-push-6 col-lg-3 col-lg-push-9">
        <div class="form-group">
            <label>Label1</label>
            <input type="text" class="form-control" />
            <input type="text" class="form-control" />
            <input type="text" class="form-control" />
            <input type="text" class="form-control" />
         </div>
    </div>

    <div class="box col-xs-12 col-sm-6 col-sm-pull-6 col-lg-3 col-lg-push-3">
        <div class="form-group">
            <label>Label2</label>
            <input type="text" class="form-control" />
        </div>
    </div>

    <div class="box col-xs-12 col-sm-6 col-lg-3 col-sm-push-6 col-lg-pull-3 col-lg-push-0 ">
        <div class="form-group">
            <label>Label3</label>
            <input type="text" class="form-control" />
        </div>
    </div>

    <div class="box col-xs-12 col-sm-6 col-lg-3 col-sm-pull-6 col-lg-pull-9">
        <div class="form-group">
            <label>Label4</label>
            <input type="text" class="form-control" />
        </div>
    </div>
</div>

$( document ).ready(function() {
function resizeOnViewportChange(){

    var heights = $(".box").map(function() {
        return $(this).height();
    }).get();

    var  maxHeight = Math.max.apply(null, heights);
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

    if (w > 770){
         $(".box").height(maxHeight);
     } else {
         $(".box").height("inherit");
     }
}

resizeOnViewportChange();
$( window ).resize(resizeOnViewportChange)});

Answer 2

Hoooray我找到了解决方案。

首先添加一个简单的CSS：

.reboot-clearfix {

  @media(min-width: 768px) and (max-width: 1200px)  {

    .clearfix();
  }
}

其次让代码如下：

<div class="container" style="background-color: pink">
    <div class="row">
        <div class="col-xs-12 col-md-6 col-md-push-6 col-lg-3 col-lg-push-9 col-lg-pull-0">
            <div class="form-group">
                <label>Label1</label>
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-md-6 col-md-pull-6  col-lg-3 col-lg-push-3 col-lg-pull-0">
            <div class="form-group">
                <label>Label2</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="reboot-clearfix col-xs-12 col-md-6 col-md-push-6 col-lg-3 col-lg-pull-3 col-lg-push-0">
            <div class="form-group">
                <label>Label3</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-md-6  col-md-pull-6 col-lg-3 col-lg-pull-9 col-lg-push-0">
            <p>empty</p>
        </div>
    </div>
</div>

重点是：当假想的第二行＆＃34;中间屏幕需要重置浮点数。应该开始。这是通过CSS实现的，并将.reboot-clearfix添加到必须在第二行的第一个div。

Bootstrap列重新排序至少三种屏幕尺寸

2 个答案: