bootstrap 3全宽图像和div在容器中 [英] bootstrap 3 full width image and div in container

问题描述

我试图在Twitter Bootstrap 3（包括没有paddings或边距）上设置一些div到 width：100％。

I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).

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

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％，包括没有paddings或边距？

1. What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?

页面标题和面包屑height是 80px 。

如果我将窗口调整到较小的屏幕，text 主页>页消失（它在某处，但不在自己的行）。
如何解决？

Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row). How to fix it?

推荐答案

您可以创建一个辅助类

.padding-0 {
    padding: 0;
}

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

and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:

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

对于第二个问题，设置 height .gray class to auto ：

For the second problem, set height of .gray class to auto :

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

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

Note: You could also remove line-height: 80px, it's optional :)

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

这篇关于bootstrap 3全宽图像和div在容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！