Question

您好我正在尝试在Bootstrap中构建一个网格系统，它允许我在MD大小和另一个在其下方充满的col上堆叠3个cols。这很好，但是当我到达LG尺寸时，我需要向右移动两列，第一列保持在9号。请看看，http://codepen.io/renzosalvador/pen/doyEwd

<div class="container">

<div class="col-xs-4 col-sm-4 col-md-9 col-lg-9 " style="background:tomato; ">
  DESCRIPTION
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>


<div class="col-xs-4 col-sm-4 col-md-3 col-lg-3" style="background:cyan; height:250px;">
  PIC
  <br>
  <br>
  <br>
  <br>
  <br>
</div>

<div class="col-xs-4 col-sm-4 col-md-3 col-lg-3" style="background:green; height:250px;">
  PRICE
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>


<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9" style="background:blue; overflow:hidden; top:10%;">
  TABLE BOX INFO
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>

Answer 1

一种方法是在PRICE列上使用pull-right类。

http://www.codeply.com/go/EIc7CEtkfz

另一种方法是更改结构，并使用带有嵌套内部列的2列。

http://www.codeply.com/go/AOGErMq6CM

Answer 2

默认引导程序的列总大小为＆＃39; 12＆＃39;。但是你的col-lg要大得多（因此专栏不能做你期望看到的）。

如何摆脱Bootstrap网格中2个div之间的差距？

2 个答案: