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

时间:2017-03-01 13:40:04

标签: html css twitter-bootstrap

我的网站上有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

2 个答案:

答案 0 :(得分:3)

将您的代码更改为:

<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

答案 1 :(得分:1)

所有列都需要直接一行(父级必须是一行),就像那样

<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