第一个 Bootstrap 项目，如何使容器宽度相等？

Question

这里的学生正在从事我的期末项目之一。第一次使用 Bootstrap。我很难让我的内容与我的导航宽度匹配。您可以实时查看项目 here 以了解我在说什么。

我先构建了网格，然后尝试在名为 style.css 的文件中创建自己的样式。

我尝试做的是创建一个 class 像这样：

.container .no-padding-lr {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

并将其应用到我的标记中：

<div class="col-sm-12 no-padding-lr">
   <h1 class="intro">Your online Canadian-built Pontiac, Acadian, and Beaumont Resource.</h1>
   <img class="img-responsive img-rounded no-padding-lr" src="assets/images/DSCN8314.JPG" alt="pontiac header" />
</div>

如您所见，它仅扩大了所需范围的 50%。

如何调整才能使内容相互一致？

Answer 1

您需要用 <div class="row">.

包装所有 col-- div

引用relevant bootstrap docs：

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Use rows to create horizontal groups of columns.

Content should be placed within columns, and only columns may be immediate children of rows.

Answer 2

是的，如上所述，您需要将任何列 div 嵌套在一行 div 中（我无法发表评论，因为这是我在 Whosebug 上的第一个 post）。这会将 margin-left:-15px 和 margin-right:-15px 添加到您的列中，使它们的宽度为 750px/100%。

第一个 Bootstrap 项目，如何使容器宽度相等？

First Bootstrap project, how do I make container widths equal?

html

css

boot

twitter-bootstrap

twitter-bootstrap-3