Html 覆盖引导容器宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22996429/
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
override bootstrap container width
提问by user3127896
I have an easy HTML template using bootstrap 3. Template has following structure: static header, static footer and content which is in the bootstrap's class "Container". In the middle of content I have bootstrap'w "Well" and i want it make looks like header and footer. I mean I want it to be the full width of the screen on any screen.
我有一个使用引导程序 3 的简单 HTML 模板。模板具有以下结构：静态页眉、静态页脚和引导程序类“容器”中的内容。在内容中间，我有 bootstrap'w "Well"，我希望它看起来像页眉和页脚。我的意思是我希望它是任何屏幕上的整个屏幕宽度。
I created easy fiddle.
我创造了简单的小提琴。
Here's a question, is there any way to override container's width inside this container?
这里有一个问题，有没有办法在这个容器内覆盖容器的宽度？
<header>
<div class="container">
<div class="content">
</div>
<div class="well">
</div>
<div class="content">
</div>
</div>
<footer>
采纳答案by iamnotsam
ORIGINAL + BEST PRACTICE: always move the .welloutside of .containerto stay idiomatic with Bootstrap.
原始 + 最佳实践：始终移动.well外部.container以保持 Bootstrap 的惯用语。
UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily modify .containerstyles and/or move the .welloutside of .container, your best bet is JavaScript. Here I have made a script that makes .wellexpand as the width of the window changes.
更新 + 如果以上不是一个选项：鉴于您无法轻松修改.container样式和/或移动 的.well外部.container，您最好的选择是 JavaScript。在这里，我制作了一个脚本，可以.well随着窗口宽度的变化而扩展。
Here is a jsFiddle
这是一个jsFiddle
The idea is that you want a negative value for margin-leftand margin-rightso that .wellexpands across the screen.
这个想法是你想要一个负值margin-left，margin-right以便.well在整个屏幕上扩展。
回答by James
The div containerhas the following max-widthspecified in media query as default by bootstrap.
divcontainer具有以下max-width在媒体查询中指定的默认引导程序。
@media (min-width: 768px){
.container{
max-width:750px;
}
}
@media (min-width: 992px){
.container{
max-width:970px;
}
}
To override this add the below style in your stylesheet
要覆盖此样式，请在样式表中添加以下样式
// This should be added in default styles, not within media query .container{ margin:0; padding:0; }
// 这应该在默认样式中添加，而不是在媒体查询中 .container{ margin:0; 填充：0; }
@media (min-width: 768px){
.container{
max-width:100%;
}
}
@media (min-width: 992px){
.container{
max-width:100%;
}
}
回答by Gonzalo
Here theres a simpler trick that works like a charm: https://css-tricks.com/full-width-containers-limited-width-parents/
这里有一个更简单的技巧，就像一个魅力：https: //css-tricks.com/full-width-containers-limited-width-parents/
Look for: "No calc() needed"
寻找：“不需要 calc()”
HTML
HTML
<header>
<div class="container">
<div class="content"></div>
<div class="well full-width"></div>
<div class="content"></div>
</div>
<footer>
CSS
CSS
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
