css - Twitter Bootstrap 网格系统 - 2 行中的 4 个 span3 的结果

Question

我正在使用 twitter bootstrap，并希望在一个容器中的一行中包含 4 个“工作原理”部分。根据 twitter bootstrap，在一个容器内，有 12 个 span，所以这应该不是问题。

出于某种原因，当我创建 4 个 div 时，它会导致第 4 个 div 转到下一行。我的屏幕宽度大于它应该垂直堆叠的宽度，所以这不是问题。

有什么想法吗？

CSS 在这里

.howitworks{
        text-align: center;
        margin-top: 30px;
        }

.howitworks p{
        margin-left:20%;
        padding-bottom: 40px;}

.howitworks h3{
        padding-top:25px;
            }

#howitworksdetail{
        border: thin solid #0d9e49;
        border-bottom-width: 3px;
        border-bottom: solid #0d9e49;
        min-height: 220px;
        margin-top: 60px;
            }

这里是 HTML

<div class = "container">
 <div class = "howitworks">
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff.</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
 </div>
</div>

我尝试消除边界，但也没有成功。谢谢

Answer 1

看来你不见了<div class="row">在你的代码中。你会注意到 Bootstrap Grid System它需要类 row 的页面为了创建包含这 12 列的行。

另外，你有类 span2在你的 <p>元素，但我相信您只想将网格类应用于 <div>元素。希望这对您有所帮助!