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

当不应该相互堆叠时，引导列相互堆叠

2 个答案: