Question

我正在尝试使用Bootstrap 3订购三列。我在大屏幕上有以下专栏：

-----------------------------
|       | Name              |
| Video |-------------------|
|       | Description       |
-----------------------------

我希望他们像移动一样堆叠：

-----------------------------
| Name                      |
-----------------------------
| Video                     |
-----------------------------
| Description               |
-----------------------------

我一直在尝试使用push和pull来堆叠它们，但我只能在桌面上将它们堆叠起来：

-----------------------------
|       | Name              |
| Video |--------------------
|       |
-----------------------------
        | Description       |
        ---------------------

我无法让描述浮起来。听起来这是一个简单的问题，但我在思考它时遇到了麻烦。任何帮助将不胜感激！

Answer 1

我假设你一直在使用bootstrap的col-*-push-*和col-*-pull-*类。他们的限制是，由于它们应用边距来实现它们的效果，因此它们只能水平移动元素。

您可以使用pull-right类来修复此问题，该类设置浮动方向。样本如下所示。

div { color:white; }

#Name { background:red; height:50px; }
#Video { background:green; height:100px; }
#Description { background:blue; height:50px; }

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div id="Name" class="col-xs-12 col-sm-8 pull-right">Name</div>
<div id="Video" class="col-xs-12 col-sm-4">Video</div>
<div id="Description" class="col-xs-12 col-sm-8 pull-right">Description</div>

Bootstrap：更改3列的Div顺序

1 个答案: