CSS 容器中的 bootstrap 3 全宽图像和 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25348617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 full width image and div in container
提问by Lari13
I'm trying to set some divs to width: 100%on Twitter Bootstrap 3 (including no paddings or margins).
我正在尝试width: 100%在 Twitter Bootstrap 3 上设置一些 div （包括没有填充或边距）。
JSfiddle: http://jsfiddle.net/rq9ycjcx/
JSfiddle：http: //jsfiddle.net/rq9ycjcx/
HTML:
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>
What is the right way to get image
http://placehold.it/350x150width: 100%, including no paddings or margins?Page title and breadcrumbs height is
80px.
If I resize window to smaller screen (e.g. mobile), textMain page > pagedisappears (it's somewhere but not on own row). How to fix it?
获取 image 的正确方法是什么
http://placehold.it/350x150width: 100%，包括没有填充或边距？页面标题和面包屑高度为
80px.
如果我将窗口大小调整为较小的屏幕（例如移动设备），文本会Main page > page消失（它在某处但不在自己的行上）。如何解决？
回答by Dan
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
使用<div class="container-fluid">. 根据 Bootstrap 文档：将 .container-fluid 用于全宽容器，跨越视口的整个宽度。
There is 0 padding on container-fluid.
上有 0 填充container-fluid。
In your code you have what appears to be bodycontent in your headerand you also have a div class="container"outside of your headerand footer. This is not correct, you should have your container/container-fluidinside of your body. Also for your header you should use <nav="nav navbar-nav">.
在您的代码中，您的内容似乎是body内容，header并且您div class="container"的header和footer. 这是不正确的，你应该有你container/container-fluid的身体内部。同样对于您的标题，您应该使用<nav="nav navbar-nav">.
回答by Davion
As suggested above, you can create a helper class
如上所述，您可以创建一个助手类
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
并将其应用于任何需要重置填充的 HTML 元素。所以在你的情况下，它看起来像这样：
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set heightof .grayclass to auto:
对于第二个问题，设置height的.gray类auto：
@media () {
.gray {
height: auto;
}
}
Note:You could also remove line-height: 80px, it's optional :)
注意：您也可以删除line-height: 80px，它是可选的 :)
回答by Kamil
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
在 Bootstrap 3 中没有“正确”的方法可以做到这一点。这意味着您必须为确切的列重置填充。
你可以创建一个这样的类：
.col-md-12.resetPadding { padding:0px }
About Main page > pagedisappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80pxthere and as you said your breadcrumbs div has height: 80px;, so try to reduce line-heightproperty and see how it works.
关于Main page > page消失，我在我的浏览器上没有看到这个问题（在 Chrome 和 FF 上测试过），但是你line-height: 80px有，正如你所说的你的面包屑 div 有height: 80px;，所以尝试减少line-height属性并看看它是如何工作的。
回答by Phill Healey
A simple way would be to remove the <div class="col-md-12">...</div>and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
一种简单的方法是<div class="col-md-12">...</div>直接在行标记中删除和添加您的内容。row 标签删除了左右边距，而cold-md-12 基本上将边距重新添加了进去。
The Bootstrap 3 documentation says that for single full width items you dont need any markup, eg just wrap it in <p>tags. However this will show the 15px gutters due to the page markup. So by simply adding in the rowtag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
Bootstrap 3 文档说，对于单个全宽项目，您不需要任何标记，例如只需将其包装在<p>标签中。但是，由于页面标记，这将显示 15px 的装订线。因此，只需添加row标签并将您的内容直接放入其中，您将获得 100% 宽度的内容并符合 BS3 文档。
