twitter-bootstrap - 如何确保在 Bootstrap 中正确设置网格系统?

标签 twitter-bootstrap fluid-layout grid-layout

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

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

问题 2:我的一些内容(例如图片 slider 的控件)位于页边距中。这会是一个问题还是可以通过创建一个包含每个列并带有一些填充的跨度来简单地解决?

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

最佳答案

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

关于twitter-bootstrap - 如何确保在 Bootstrap 中正确设置网格系统?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14903153/

相关文章:

javascript - Twitter Bootstrap Datepicker 错误

html - 具有多个图像的 Bootstrap 模态

html - Bootstrap 不从母版页文件执行

css - 文字和图像重叠 - 不太确定发生了什么。

html - 流体网格未正确缩放

java - 获取 GridLayout 中 JPanel 的位置/索引?

html - 菜单项不在同一水平线上

css - 相对于同级的流体宽度 div

java - 关于周转容器

c++ - 在 QGridLayout 中拉伸(stretch) QLabel