我如何确保我在Bootstrap中正确设置网格系统?

时间:2013-02-15 20:52:48

标签: twitter-bootstrap fluid-layout grid-layout

我刚刚开始使用Bootstrap(之前从未使用过网格系统),并且在理解实现流体网格系统的正确方法时遇到了问题。我有点担心我可能需要重新设计网站。请参阅图片了解更多详情。

问题1:在整个网站周围添加白色边框/填充的正确方法是什么,并且仍可按比例缩放。我是否必须在每个新行的开头和结尾添加它,或者是否有更简单的方法将其全局应用?

问题2:我的部分内容(例如图片滑块的控件)位于边距内。这是一个问题还是只是通过创建一个包含每个填充的填充的跨度来解决?

问题3:我知道Bootstrap有一个默认的12列系统,但看起来你可以通过“自定义下载”轻松自定义它。是否像在@gridColumns字段中输入14一样简单,还是我还需要更改px宽度?

1 个答案:

答案 0 :(得分:2)

问题1:一个选项就是让div包装你的内容,例如:

HTML

<div class="wrapper">
    <div class="container">
        // ...
    </div>        
</div>

CSS

.wrapper{
    border-right: 4px solid #fff;
    border-left: 4px solid #fff;
}

问题2:例如,您可以使用类似margin-left: -20px的内容将项目推出容器。

问题3:是的,您可以使用构建器进行自定义,但是,例如,如果要保留默认的940px宽度,但有14列,则必须调整列宽变量也是如此。