Question

学生在这里完成我的一个最终项目。第一次使用Bootstrap。我难以使我的内容与导航的宽度相同。你可以看到项目实时here，看看我在说什么。

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

我试图做的是创建一个类似的类：

.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：

行必须放置在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。

使用行创建水平的列组。

内容应放在列中，只有列可能是行的直接子项。

Answer 2

是的，如上所述，你需要在行div中嵌套任何列div（我不能发表评论，因为这是我在stackoverflow上的第一篇文章）。这会向您的列添加margin-left：-15px和margin-right：-15px，使其宽度为750px / 100％。

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

2 个答案: