Bootstrap更改div顺序，向右拉，向左拉3列 [英] Bootstrap change div order with pull-right, pull-left on 3 columns

问题描述

我整天都在努力，但没有提出解决方案.我在一个容器中的一行中有3列.

I’ve been working on this the whole day but don’t come up with a solution. I have 3 columns in one row in a container.

1:正确的内容–向右拖动

1: right content – pull-right

2:导航–向左拉

3:主要内容

在大屏幕上的外观:

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

在较小的屏幕上应该是什么样子:

What it should look like on smaller screens:

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

现在的样子:

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

我认为这只是一个简单的浮动问题.但是我尝试了几乎所有的可能性.

I think it’s just a simple floating problem. But I tried out nearly all possibilities.

推荐答案

Bootstrap 3

使用Bootstrap 3的网格系统:

Bootstrap 3

Using Bootstrap 3's grid system:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

工作示例: http://bootply.com/93614

首先，我们设置了两列，无论屏幕分辨率(col-xs-*)都保持不变.

First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).

接下来，我们将较大的右侧列分为两列，这些列将在平板电脑大小的设备上彼此重叠，而在较低尺寸的设备上(col-md-*)相互重叠.

Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).

最后，我们使用匹配的类(col-md-[push|pull]-*)改变显示顺序.您将第一列的数量推到第二列，然后将第二列的数量推到第一列.

Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.

这篇关于Bootstrap更改div顺序，向右拉，向左拉3列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！