如何确保在 Bootstrap 中正确设置网格系统？答案

【问题标题】：How do I insure I am setting up the grid system properly in Bootstrap?如何确保在 Bootstrap 中正确设置网格系统？
【发布时间】：2013-01-31 22:14:48
【问题描述】：

我刚刚开始使用 Bootstrap（我以前从未使用过网格系统）并且在理解实现流体网格系统的正确方法时遇到了问题。我有点担心我可能不得不重新设计网站。请查看图片了解更多详情。

问题 1： 什么是在整个网站周围添加白色边框/填充并且仍然可以缩放的正确方法。我是否必须将它添加到每个新行的开头和结尾，还是有更简单的方法来全局应用它？

问题 2： 我的一些内容（例如图片滑块的控件）位于页边空白处。这会是一个问题，还是只是通过创建一个包含每列和一些填充的跨度来解决？

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

【问题讨论】：

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

【解决方案1】：

问题 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 列，则必须调整列宽变量也是如此。

【讨论】：