Question

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

以下是我所得到的以及问题所在的演示：

即使添加了行类，当区域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

你没有将它们包装成行类。
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

来自Bootstrap - Grid system

<强>简介
  ...
   - 列通过填充创建排水沟（列内容之间的间隙）......

和

网格选项
  ...
  装订线宽度为30px（每列15px）

但正如您稍后可以在 LESS mixins和变量

中看到的那样

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

差距总是一样的。

Answer 4

Twitter bootstrap的网格系统不是流畅的，级联的或者你想要的任何东西。它一行只接受12列，你应该在每个12列元素周围使用那些.row包装器。我认为，当它超过它时，它假定新行已经开始。

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

您可以尝试使用像Masonry（http://masonry.desandro.com/）这样的东西，有或没有引导程序。使用bootstrap，您可以在行内创建Masonry网格＆gt; 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;
    }
}

我已经测试过拉动式DOES的工作原理，只是没有测试过这个css。

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

5 个答案: