CSS Bootstrap 元素 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11895476/
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 Element 100% Width
提问by user1589214
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
我想创建交替的 100% 彩色块。一个“理想”的情况被描述为一个附件，以及当前的情况。
Desired setup:
所需设置：
Currently:
目前：
My first idea was to create an div class, give it a background color, and give it 100% width.
我的第一个想法是创建一个 div 类，给它一个背景颜色，并给它 100% 的宽度。
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
但是，您可以看到这显然不起作用。它被限制在一个集装箱区。我试图关闭容器，但也没有用。
回答by Ross Allen
The containerclass is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
的container类是有意不是100％的宽度。它是不同的固定宽度，具体取决于视口的宽度。
If you want to work with the full width of the screen, use .container-fluid:
如果要使用整个屏幕宽度，请使用.container-fluid：
Bootstrap 3:
引导程序 3：
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
引导程序 2：
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
回答by jvannistelrooy
This is how you can achieve your desired setup with Bootstrap 3:
这是使用Bootstrap 3实现所需设置的方法：
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluidpart makes sure that you can change the background over the full width. The containerpart makes sure that your content is still wrapped in a fixed width.
该container-fluid部分确保您可以在整个宽度上更改背景。该container部分确保您的内容仍以固定宽度包装。
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
这种方法有效，但我个人不喜欢所有的嵌套。但是，到目前为止，我还没有找到更好的解决方案。
回答by jave.web
QUICK ANSWER
快速回答
- Use multiple NOT NESTED
.containers - Wrap those
.containers you want to have a full-width background in adiv - Add a CSS background to the wrapping div
- 使用多个NOT NESTED
.containers - 将那些
.container你想拥有全角背景的 s包裹在一个div - 将 CSS 背景添加到包装 div
Fiddles:Simple: https://jsfiddle.net/vLhc35k4/, Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
小提琴：简单：https ://jsfiddle.net/vLhc35k4/，容器边框：https : //jsfiddle.net/vLhc35k4/1/
HTML：
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS:.specialBackground{ background-color: gold; /*replace with own background settings*/ }
CSS：.specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
更多信息
DON'T USE NESTED CONTAINERS
不要使用嵌套容器
Many people will (wrongly) suggest, that you should use nested containers.
Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
许多人会（错误地）建议您应该使用嵌套容器。
那么，你应该不是。
它们不能嵌套。（请参阅文档中的“容器”部分）
HOW IT WORKS
这个怎么运作
divis a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
div是一个块元素，默认情况下跨越文档正文的全宽 - 有全宽功能。它还具有其内容的高度（如果您没有另外指定）。
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
bootstrap 容器不需要是 body 的直接子代，它们只是带有一些填充和可能一些屏幕宽度可变固定宽度的容器。
If a basic grid .containerhas some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
如果基本网格.container具有固定宽度，它也会自动水平居中。
所以你把它作为一个没有区别：
- Direct child of a body
- Direct child of a basic
divthat is a direct child of a body.
- 身体的直接孩子
- 一个基本
div的直接孩子，是一个身体的直接孩子。
By "basic" divI mean divthat does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block;CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
“基本”div是div指没有 CSS 改变他的边框、填充、尺寸、位置或内容大小。实际上只是一个带有display: block;CSS 和背景的 HTML 元素。
但是当然设置类似垂直的 CSS（高度，填充顶部，...）不应该破坏引导网格 :-)
Bootstrap itself is using the same approach
Bootstrap 本身也在使用相同的方法
...All over it's own websiteand in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
...在它自己的网站和“JUMBOTRON”示例中：http://getbootstrap.com/examples/jumbotron/
回答by benedex82
There is a workaround using vw. Is useful when you can't create a new fluid container. This, inside a classic 'container' div will be full size.
有一个使用 vw 的解决方法。当您无法创建新的流体容器时很有用。这在经典的“容器”div 中将是全尺寸的。
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to @Typhlosaurus), solved with this js function, calling it on document load and resize:
在此之后有侧边栏问题（感谢@Typhlosaurus），用这个js函数解决，在文档加载和调整大小时调用它：
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
回答by Dina
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
在引导程序 4 中，您可以使用 'w-100' 类（w 作为宽度，100 作为 100%）
You can find documentation here: https://getbootstrap.com/docs/4.0/utilities/sizing/
您可以在此处找到文档：https: //getbootstrap.com/docs/4.0/utilities/sizing/
回答by Seb33300
If you can't change the HTML layout:
如果您无法更改 HTML 布局：
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
回答by Yevgeniy Afanasyev
Instead of
代替
style="width:100%"
try using
尝试使用
class="col-xs-12"
it will save you 1 character :)
它将为您节省 1 个字符 :)
回答by Michael Peterson
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; }in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center>closes a <center>without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
抱歉，也应该要求您提供 css。按.container { width: 100%; }原样，基本上您需要查看的是在您的 css 中为您的容器 div 提供样式，然后只要您不给它们自己的宽度，封闭的 div 就会继承它。您还缺少一些结束标记，并且在没有打开</center>的<center>情况下关闭了 a ，至少在这部分代码中是这样。我不确定您是否想要包含您的内容的同一 div 中的图像或单独的图像，因此我创建了两个示例。我将 img 的宽度更改为 100px 仅仅是因为 jsfiddle 提供了一个小的查看区域。如果这不是您要找的，请告诉我。
content and image separate: http://jsfiddle.net/QvqKS/2/
内容和图像分开：http: //jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
同一 div 中的内容和图像（img 向左浮动）：http: //jsfiddle.net/QvqKS/3/
回答by adamj
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
从任何角度来看，以下答案都不是最佳答案，但我需要一些东西来保持其在容器内的位置，同时完全拉伸内部 div。
https://jsfiddle.net/fah5axm5/
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
回答by Alisson
I'd wonder why someone would try to "override" the container width, since its purpose isto keep its content with some padding, but I had a similar situation(that's why I wanted to share my solution, even though there're answers).
我想知道为什么有人会尝试“覆盖”容器宽度，因为它的目的是用一些填充来保持它的内容，但我有类似的情况（这就是为什么我想分享我的解决方案，即使有答案）。
In my situation, I wanted to have all content (of all pages)rendered inside a container, so this was the piece of code from my _Layout.cshtml:
在我的情况下，我希望将所有内容（所有页面的）呈现在一个容器中，所以这是我的 _Layout.cshtml 中的一段代码：
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
@RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
在我的主页索引页面中，我有一个背景标题图像，我想填充整个屏幕宽度，因此解决方案是使 Index.cshtml 像这样：
@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
我认为这比尝试解决方法要好，因为创建部分的目的是允许（或强制）视图动态替换布局中的某些内容。
