Question

我试图让两个部分的引导程序布局适用于桌面屏幕，这些部分会变成一个移动部分。

请参阅codepen：http://codepen.io/anon/pen/WwWZKe

<div class="col-md-8 pull-right" style="background-color: #263;height:120px;">Section 1</div>
<div class="col-md-8 pull-right" style="background-color: #299;height:30px;">Section 2</div>

<div class="col-md-3 pull-left" style="background-color: #999;height:50px;">Section 3</div>
<div class="col-md-3 pull-left" style="background-color: #623;height:80px;">Section 4</div>
<div class="col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div>

理想情况下，我希望将它们分成两列（左边的3,4节和右边的1,2,5）。但我不想创建两个超级列：

<div class="row">
  <div class="col-md-4">section3 , section 4</div>
  <div class="col-md-8">section 1, section 2, section 5</div>
</div>

因为我想要这个订单（第1-5节）用于移动。

修改

桌面的预期订单是： 3-4（左侧部分）和1-2-5（右侧部分）适用于手机：1-2-3-4-5 Divs的高度各不相同，我希望它们没有空格。

更新

所以我尝试了另一种方法：

<div class="col-md-8 col-md-push-4">
  <div style="background-color: #263;height:120px;">Section 1</div>
  <div class="" style="background-color: #299;height:30px;">Section 2</div>
</div>

<div class="col-md-4 col-md-pull-8">
  <div style="background-color: #999;height:50px;">Section 3</div>
  <div class="" style="background-color: #623;height:280px;">Section 4</div>
</div>
<div class="col-md-8 col-md-push-4" style="background-color: #222;height:80px;">Section 5</div>

我加入了一起使用的块，但是在第5节之前我的右侧部分仍然存在间距问题。

Answer 1

您想要使用col-<size>-<n>个类的多个实例。移动设备为xs，桌面设备为md或lg。如果你打算要求1-3-5和2-4，那就是idk，但这就是我的所作所为。如果div都具有相同的高度，则此解决方案仅适用。希望这会有所帮助。

http://codepen.io/anon/pen/qZwPGo

Answer 2

您需要调查推/拉方法，但不是您已经拥有的方法 - 调查以下语法：

例如：＆＃34; COL-MD-推-3＆＃34;或＆＃34; col-sm-pull-6＆＃34 ;;等

这将允许您在不同的视口上将div移动到不同的顺序。只需使用pull-right就会对每个div应用一个float：right - 而不是你之后的效果

push类将div移动到右侧，而pull类将div移动到左侧。因此，你可以在一个较宽的视口中在屏幕左侧有一个div，在一个小视口的左边，在移动设备上以所需的顺序堆叠（-xs- size）

Answer 3

好的，所以它最终奏效了： http://codepen.io/anon/pen/pymNRm

<div class="col-xs-12 col-md-8 pull-right">
  <div style="background-color: #263;height:120px;">Section 1</div>
  <div class="" style="background-color: #299;height:30px;">Section 2</div>
</div>

<div class="col-xs-12 col-md-4 pull-left">
  <div style="background-color: #999;height:50px;">Section 3</div>
  <div class="" style="background-color: #623;height:280px;">Section 4</div>
</div>
<div class="col-xs-12 col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div>

我必须将组合在一起的块组合起来并使用右拉和左拉

带引导程序的两个部分布局

3 个答案: