bootstrap列彼此堆叠时，应该不会

Question

我的网站上有3x4列，总共相当于12列。但由于某种原因，它们恰好相互叠加，即使有足够的空间供他们使用。我无法弄清楚是什么导致他们崩溃。我有一个小小的演示，你可以看到红色的盒子堆叠在一起。

HTML：

<div class="row portfolio"> 
    <div class="body_container2"> 
    <h1 class="display portfolio_h1">Portfolio</h1> 

    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    </div> 
    </div> 

Codepen：

http://codepen.io/Limpuls/pen/Qpyygj

Answer 1

你的代码更改为：

<div class="body_container2"> 
<h1 class="display portfolio_h1">Portfolio</h1> 
<div class="row portfolio"> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
</div> 
</div> 

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

Answer 2

所有列必须直接在行（母公司必须是一个行），这样

<div class="row"> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    ... 
</div> 

你可以看到我Ť这里工作：http://codepen.io/anon/pen/oZbbaQ