Question

这是我的lg布局：

------------------------------------------------
|     3(xs4)|    3(xs4)|    3(xs4)|   3(12xs)  |
------------------------------------------------

这是我的xs布局：

------------------------------------------------
|     4         |      4        |     4        |
------------------------------------------------   
|                  12                          |
------------------------------------------------

到目前为止我的HTML（没有推拉）：

           <div class="row">
                            <div class="col-lg-3 col-sm-3 col-xs-4  text-center">

                            </div> 
                            <div class="col-lg-3 col-sm-3 col-xs-4  text-center">

                            </div> 
                            <div class="col-lg-3 col-sm-3 col-xs-4  text-center">

                            </div> 
                            <div class="col-lg-3 col-sm-3 col-xs-12  text-left">


                            </div>   

                       </div

我需要什么：

lg布局的最后一列必须位于xs布局的顶部。当我使用push和pull时，我只能更改行中的位置。列不会自动跳转到下一行/上一行。

我想要的结果：

------------------------------------------------
|                  12                          |
------------------------------------------------
|     4         |      4        |     4        |
------------------------------------------------

Answer 1

您需要更改HTML中元素的顺序，以便col-*-12成为第一位。然后，您可以像这样使用push和pull：

/* For demo only... */
[class*="col-"] {
  outline: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-lg-3 col-sm-3 col-xs-12 col-sm-push-9 text-left">
    12
  </div>
  <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3  text-center">
    4
  </div>
  <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3  text-center">
    4
  </div>
  <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3  text-center">
    4
  </div>
</div>

在不更改元素顺序的情况下，您无法使用push和pull实现所需的布局。

Bootstrap - 将整行推到顶部

1 个答案: