在Twitter引导程序中创建网格跨度之间的空间
Create spaces between grid spans in Twitter Bootstrap
如何在Twitter引导程序中在网格跨度之间创建一些空间?我使用了边距或填充,但两者都将最后一个网格跨度推到一条新行,并破坏了布局。这是jsfiddle:
http://jsfiddle.net/jUQEc/1/
还有一些标记:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="posts">
<div class="span6 post">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
两件事:
您需要将container-fluid
类添加到容器中。当你把屏幕放进去时,这将保持左/右页边距。
向.box
类添加一个box-sizing:border-box
,以告诉浏览器将所有填充和边距保持在span类定义的宽度内。
最后,您在容器中有一个header标记,但不在一行/span中。如果将其包裹起来,可能会得到更一致的渲染。
这是一把小提琴:http://jsfiddle.net/8RVx6/
相关文章:
- JSDoc:模块和名称空间之间的关系是什么
- 静态html中图像之间的空间在javascript中消失
- 画布填充-形状之间的空间(抗锯齿)
- 在图例项目之间添加额外空间的高图表
- 标题中大写字母之间的角度UI网格空间
- 声明Javascript名称空间的两种方法之间的区别
- 限制td之间的空间
- 如何在不让web组件的原型进入全局命名空间的情况下维护它们之间的依赖关系
- 在按钮之间添加隐藏空间
- 命名空间和词法范围之间的关系是什么
- 如何通过在两个节点之间拖放来制作边缘,并在细胞空间中扩展 egdehandle 扩展.js
- 如何在两个图像之间添加空间
- Javascript - 命名空间与闭包之间的区别
- TypeScript/JavaScript中的模块和命名空间之间的区别是什么
- 正在删除图像之间不需要的空间
- 增加了网站上项目之间的空间
- Javascript需要填充内容和页脚之间的剩余高度空间
- 摇摆图像之间的黑色空间
- 在Twitter引导程序中创建网格跨度之间的空间
- Javascript 命名空间 - 函数之间的变量交换