Html 如何在引导程序中的容器内创建 100% 屏幕宽度 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24049467/
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
How to create a 100% screen width div inside a container in bootstrap?
提问by Irshu
Let's say i have the following markup:
假设我有以下标记：
<div class="container">
<div class="row">
<div class="col-md-12">
...
<div class="full-width-div">
</div>
</div>
</div>
</div>
Now how to make .full-width-divstretch to the full width of the screen? Because currently it's limited inside the container.
现在如何.full-width-div拉伸到屏幕的整个宽度？因为目前它仅限于容器内。
回答by Cody
2019's answer as this is still actively seen today
2019 年的答案，因为今天仍然很活跃
You should likely change the .container to .container-fluid, which will cause your container to stretch the entire screen. This will allow any div's inside of it to naturally stretch as wide as they need.
您可能应该将 .container 更改为 .container-fluid，这将导致您的容器拉伸整个屏幕。这将允许它里面的任何 div 自然地伸展到他们需要的宽度。
original hack from 2015 that still works in some situations
2015 年的原始 hack 在某些情况下仍然有效
You should pull that div outside of the container. You're asking a div to stretch wider than its parent, which is generally not recommended practice.
您应该将该 div 拉到容器之外。您要求 div 比其父级拉伸得更宽，这通常是不推荐的做法。
If you cannot pull it out of the div for some reason, you should change the position style with this css:
如果由于某种原因无法将其从 div 中拉出，则应使用此 css 更改位置样式：
.full-width-div {
position: absolute;
width: 100%;
left: 0;
}
Instead of absolute, you could also use fixed, but then it will not move as you scroll.
除了绝对，您还可以使用固定，但是当您滚动时它不会移动。
回答by Shawn Taylor
You should use container-fluid, not container. See example: http://www.bootply.com/onAFpJcslS
您应该使用container-fluid，而不是container。参见示例：http: //www.bootply.com/onAFpJcslS
回答by Renesansz
The reason why your full-width-div doesn't stretch 100% to your screen it's because of its parent "container" which occupies only about 80% of the screen.
全宽 div 没有 100% 拉伸到屏幕的原因是因为它的父“容器”仅占屏幕的 80% 左右。
If you want to make it stretch 100% to the screen either you make the "full-width-div" position fixed or use the "container-fluid" class instead of "container".
如果你想让它 100% 拉伸到屏幕，你可以固定“full-width-div”位置或使用“container-fluid”类而不是“container”。
see Bootstrap 3 docs: http://getbootstrap.com/css/#grid
请参阅 Bootstrap 3 文档：http: //getbootstrap.com/css/#grid
