Twitter Bootstrap 3大屏幕、中屏幕和小屏幕网格布局的问题

Question

我已经使用Twitter Bootstrap 3创建了一个网格布局，但我可以弄清楚为什么在大屏幕上查看时，我的列之间会有很大的差距。

以下是我得到的东西和问题的演示：

http://jsfiddle.net/jSURG/18/

即使添加了行类，当有很多内容添加到区域2 时，我仍然会受到很大的干扰

<div class="container">    
   <div class="row">
    <div class="col-lg-6 col-md-12">
        <section class="panel">area 1</section>
    </div>
   <div class="col-lg-6 col-md-12">
    <section class="panel panel-info">area 2<br />area 2<br />area 2<br />area 2<br />area 2<br />area 2<br />area 2<br />area 2<br />area 2<br />area 2<br /></section>
    </div>
  </div>
   <div class="row">
    <div class="col-lg-6 col-md-12">
        <section class="panel">area 3</section>
        <section class="panel">area 4</section>
  </div>
</div>

感谢

Answer 1

1. 你没有把它们包装成排课
2. col lg和col md之后的数字之和应小于12行

Answer 2

您需要将列包装在中

<div class="container">    
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <section class="panel">area 1</section>
        </div>
    <div class="col-lg-6 col-md-12">
            <section class="panel panel-info"></section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <section class="panel">area 3</section>
            <section class="panel">area 4</section>
        </div>
    </div>
</div>

Answer 3

从引导-网格系统

简介
…
-列通过填充创建檐沟（列内容之间的间隙）。。。

和

网格选项
…
沟槽宽度30px（列每侧15px）

但正如您稍后在LESS混合和变量中看到的那样

padding-left: (@gutter / 2);
padding-right: (@gutter / 2);

差距总是一样的。

Answer 4

Twitter引导程序的网格系统不是流动的、级联的或任何你想称之为的。它一行只接受12列，你应该在每个12列元素周围使用这些.row包装器。我认为，当它越过它时，它假设新的争吵已经开始。

因此，对于您的网格，已经有一行包含区域1和区域2（6+6=12），最后一个.col开始一个新行。div.row的行为就像一个div，它位于另一个div之上。

你可以试着用砖石之类的东西(http://masonry.desandro.com/)，带或不带引导程序。使用bootstrap，您可以像一样在行>col-lg-12内创建砖石网格

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            Masonry grid here.
        </div>
    </div>
</div>

Answer 5

您需要在第二个div区域2添加一个类，类似

@media (min-width: 992px) {
   .div-lg-right {
        pull-right;
    }
}

我已经测试了pull-right确实有效，只是没有测试这个css。