我正在使用twitter bootstrap,并希望在容器中的一行上有4个“工作原理”部分。 根据twitter bootstrap的介绍,一个容器中有12个跨度,因此这不是问题。

出于某种原因,当我创建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>

我试图消除边界,但也没有这样做。 谢谢

===============>>#1 票数:0 已采纳

看起来您的代码中缺少<div class="row"> 您会在Bootstrap Grid System页面上注意到,它需要类row才能创建包含这12列的行。

另外,您在<p>元素上具有类span2 ,但我相信您只想将网格类应用于<div>元素。 希望这可以帮助!

  ask by brad translate from so

未解决问题?本站智能推荐:

2回复

尝试在Twitter Bootstrap 2.3.2行/跨中对齐三个图像

我正在尝试对齐所有三个图像,以便它们均匀地排在行的中心。 这是标记的小提琴, http://jsfiddle.net/bkmorse/btCRk <div class="container" <div class="row" style="border:1px sol
2回复

引导程序2网格显示的行为不符合预期(span12…)

我从引导站点复制粘贴了示例代码,但没有得到预期的结果 从此处改编:视图源: http : //getbootstrap.com/2.3.2/base-css.html#forms 它按照附带的屏幕截图显示。 有3件事与预期不符:-尽管我设置了span12类,但网格仍显示
1回复

引导程序2.3.1中的固定跨度侧栏

我使用Bootstrap 2.3.1! 现在我有这段代码: 浏览器滚动时,我需要fixed span2才能放置fixed侧边栏。 Bootstrap如何固定跨度? 注意:我还需要具有正常的响应式布局。
1回复

Twitter Bootstrap 2.3.2图像在非流体网格中

我正在使用bootstrap 2.3.2构建模板,我希望根据网格拥有一定尺寸的图像。 (我没有使用流体网格,但我使用的是响应功能)。 我预计,例如在span4 div中包含的图像会相应地缩小,即使它具有更大的分辨率,但是它以其实际像素大小显示。 有没有办法根据div大小缩小图像? 或
1回复

表单字段彼此堆叠,而不是在Twitter引导程序中彼此堆叠

我正在使用twitter bootstrap并尝试创建其中两个文本框彼此相邻的一行。 这是我的代码: 但是,由于某种原因,模板元素会一个一个地堆叠在另一个之上。 我该如何解决?
2回复

如何在引导程序中向右拉DIV行

我有DIV包含2个DIVs ,如何让从右到左用显示的潜水CSS HTML代码: 现在: 我想要使​​用上面具有相同HTML代码的CSS来获得此代码: 那个怎么样 ?
1回复

Twitter Bootstrap行嵌套

我仍然是Twitter Bootstrap和整个网格框架的新手,所以如果这看起来像是一个非常无聊的问题,请耐心等待。 但这是我到目前为止在jsFiddle中所拥有的 。 HTML CSS 我想要实现的是在白色空间中的最后一个大红色框之后放置2个小盒子。 我做了一些研
2回复

Twitter引导程序2.3.2 popover在悬停时保持打开状态

我有一个底部导向的弹出窗口,我想比默认弹出窗口更宽容,一旦鼠标离开触发器就会消失。 只要鼠标悬停在触发器或弹出窗口内容上,我就可以保持打开状态,但这对用户来说很难,因为他们必须将鼠标从触发元素移动到箭头到内容而不离开这些区域为了与popover互动。 考虑两种解决方案,两种解决方案都不
14回复

摆脱Twitter Bootstrap中的所有圆角

我喜欢Twitter Bootstrap 2.0-我喜欢它是一个如此完整的库...但是我想对一个非常四四方方而不是圆形的站点进行全局修改,以摆脱Bootstrap中的所有圆角... 这需要大量的CSS。 是否有全局转换,或者找到并替换所有四舍五入的最佳方法是什么?
7回复

在Twitter Bootstrap中更改select标签的宽度

使用Twitter引导程序时,如何更改选择字段的宽度? 添加input-xxlarge CSS类似乎不起作用(就像在其他表单元素上一样),因此我的下拉列表中的元素目前被截断。