Bootstrap 更改 div 顺序,在 3 列上向右拉,向左拉 [英] Bootstrap change div order with pull-right, pull-left on 3 columns
问题描述
我已经为此工作了一整天,但没有想出解决方案.我在一个容器的一行中有 3 列.
1:正确的内容 - 向右拉
2: 导航 – 向左拉
3:主要内容
它在大屏幕上的显示:
------------------------------------------------|菜单 |内容 |正确的内容 |------------------------------------------------
在小屏幕上应该是什么样子:
----------------------------|菜单 |正确的内容 |||-------------------||内容 |-----------------------------
现在的样子:
-------------------|正确的内容 |------------------|菜单 |内容 |------------------
我认为这只是一个简单的浮动问题.但我尝试了几乎所有的可能性.
Bootstrap 3
使用 Bootstrap 3 的网格系统:
<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">正确的内容</div><div class="col-md-8 col-md-pull-4">内容</div>
说明
首先,我们设置了两列,无论屏幕分辨率如何(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 更改 div 顺序,在 3 列上向右拉,向左拉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!