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

Question

我试图width: 100%在Twitter Bootstrap 3上设置一些div (包括没有填充或边距).

JSfiddle:http://jsfiddle.net/rq9ycjcx/

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>

1. 获取图像的正确方法是什么http://placehold.it/350x150 width: 100%,包括没有填充或边距？

2. 页面标题和面包屑高度是80px.
   如果我将窗口调整为较小的屏幕(例如移动设备),则文本Main page > page消失(它在某处但不在自己的行上).怎么解决？

Answer 1

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

有0填充container-fluid.

在你的代码有什么似乎是body在你的内容header,你也有div class="container"你的外面header和footer.这是不正确的,你应该拥有自己container/container-fluid的身体内部.您也应该使用标题<nav="nav navbar-nav">.

更新小提琴

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/