Bootstrap：使用pull-right，pull-left / 3列更改div顺序 [英] Bootstrap: change div order with pull-right, pull-left / 3 columns

问题描述

我一直在这一整天工作，但不提出一个解决方案。我在容器中的一行中有3列。

1：正确的内容 - 右键

2 ：navigation-pull-left

3：主要内容

在大萤幕上显示的内容：

  ----------------------------- ------------------- 
 |菜单|内容|权利内容| 
 ---------------------------------------------- -  
  

在较小的萤幕上应该是什么样子：

  ---------------------------- 
 |菜单|权利内容| 
 | | ------------------ 
 | |内容| 
 ---------------------------- 
  

现在的样子：

  --------- --------- 
 |正确内容| 
 ------------------ 
 |菜单|内容| 
 ------------------ 
  

我认为这只是一个简单的浮动问题。

解决方案

Bootstrap 3

使用Bootstrap 3的网格系统：

 < div class =container> 
< div class =row> 
< div class =col-xs-4>菜单< / 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>内容< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

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

说明

设置两列将保持原位，无论屏幕分辨率（ col-xs - * ）。

下一页，我们将较大的右侧列分成两个列，这两列将在平板电脑大小的设备和其他平台（ col-md - * ）上互相折叠。最后，我们使用匹配类（ col-md- [push | pull] - * ）来移动显示顺序。 。您将第一列向前推第二列的数量，然后将第二列向前推第一列的数量。

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: right content – pull-right

2: navigation – pull-left

3: main content

What it looks on big screens:

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

What it should look like on smaller screens:

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

What it looks like now:

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

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

解决方案

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>

Working example: http://bootply.com/93614

Explanation

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

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-*).

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：使用pull-right，pull-left / 3列更改div顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！