Question

我试图在Twitter Bootstrap 3上设置一些div为width: 100%（包括没有填充或边距）。

HTML：

<div class="container">
    <header>
        <div class="row">
            <div class="col-md-2">
                <img src="http://placehold.it/150x50">
            </div>
            <div class="col-md-10">Menu</div>
        </div>
        <div class="row gray">
            <div class="col-md-6">
            <h1>Page Title</h1>
            </div>
            <div class="col-md-6">
                <div class="breadcrumbs">Main page > page </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
            <img src="http://placehold.it/350x150" />
            </div>    
        </div>    
    </header>

    <footer>
    <div class="row">
        <div class="col-md-12">Content</div>
    </div>
    <div class="row dark">
        <div class="col-md-3">Footer 1</div>
        <div class="col-md-3">Footer 2</div>
        <div class="col-md-3">Footer 3</div>
        <div class="col-md-3">Footer 4</div>
    </div>
    </footer>    
</div>

获取图片http://placehold.it/350x150 width: 100%的正确方法是什么，包括没有填充或边距？
页面标题和面包屑高度为80px 如果我将窗口调整为较小的屏幕（例如移动设备），则文本Main page > page会消失（它在某处但不在自己的行上）。如何解决？

Answer 1

使用<div class="container-fluid">。根据Bootstrap Docs：使用.container-fluid作为全宽容器，跨越视口的整个宽度。

container-fluid上有0填充。

在您的代码中，您的body内容似乎为header内容，并且div class="container"和header之外还有footer。这是不正确的，你应该将container/container-fluid放在体内。另外，对于标题，您应该使用<nav="nav navbar-nav">。

<强> Updated Fiddle

Answer 2

如上所述，您可以创建一个帮助类

.padding-0 {
    padding: 0;
}

并将其应用于需要填充重置的任何HTML元素。所以在你的情况下，它看起来像这样：

<div class="row">
    <div class="col-md-12 padding-0">
        <img src="http://placehold.it/350x150" />
    </div>    
</div>

对于第二个问题，请将height课程的.gray设为auto：

@media () {
    .gray {
        height: auto;
    }
}

注意：您也可以删除line-height: 80px，它是可选的：）

http://jsfiddle.net/rq9ycjcx/8/

Answer 3

在Bootstrap 3中没有“正确”的方法。这意味着您必须重置精确列的填充。
您可以创建一个类，例如：

.col-md-12.resetPadding { padding:0px }

关于Main page > page消失了，我在我的浏览器上看不到这个问题（在Chrome和FF上测试过），但是你有line-height: 80px，正如你所说的你的面包屑div {{1} }，所以尝试减少height: 80px;属性，看看它是如何工作的。

Answer 4

一种简单的方法是删除<div class="col-md-12">...</div>并直接在行标记内添加内容。行标记删除了左边的＆amp;正确的排水沟，而冷md-12基本上将排水沟添加回来。

Bootstrap 3文档说明，对于单个全宽度项目，您不需要任何标记，例如将其包装在<p>标记中。但是，由于页面标记，这将显示15px排水沟。因此，只需添加row标记并将您的内容直接放入其中，即可获得100％宽度内容并符合BS3文档。

bootstrap 3全宽图像和容器中的div

4 个答案: