twitter-bootstrap Bootstrap 3 在容器内添加容器流体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38229708/
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 Adding a container-fluid inside a container?
提问by The Little Cousin
I have a normal container, and inside this container I want to add a full-width container-fluid, so that the container is Full View Point across my screen. I tried this, but it's not going full width.
我有一个普通的容器，在这个容器内我想添加一个全宽的容器流体，以便容器在我的屏幕上是全视点。我试过这个，但它不是全宽。
<div class="container">
<div class="container-fluid">
</div>
</div>
According to me the container-fluid is full width across the container and not the screen. Any way to override it?
据我说，容器流体是整个容器的全宽，而不是屏幕。有什么办法可以覆盖吗？
采纳答案by Robert
You cannot use .container-fluidinside of a .containerand get what you're trying to achieve. Look at the code for Bootstrap's .containerclass; it has a fixed width.
您不能.container-fluid在 a 内部使用.container并获得您想要实现的目标。看一下Bootstrap的.container类的代码；它有一个固定的宽度。
You need to use .container-fluidOUTSIDE of the fixed-width container.
您需要使用.container-fluid固定宽度容器的 OUTSIDE。
An example is below:
一个例子如下：
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Some Content</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<p>Item 1</p>
</div>
<div class="col-md-4">
<p>Item 2</p>
</div>
<div class="col-md-4">
<p>Item 3</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Some More Content</p>
</div>
</div>
</div>
It's perfectly acceptable to have multiple containers throughout the site, wherever you need to make use of a Bootstrap Grid.
在整个站点中拥有多个容器是完全可以接受的，无论您在何处需要使用 Bootstrap 网格。
回答by Amine99
.full-width {
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}<div class="container">
<div class="container-fluid full-width">
</div>
</div>This works because you are using vw- vertical-widthwhich equals enduser's desktop width. This overrides %because a %is the percentage of a parent, vhuses the desktop.
这是有效的，因为您正在使用vw-vertical-width等于最终用户的桌面宽度。这会覆盖，%因为 a%是父项的百分比，vh使用桌面。
回答by Nehemiah
Try to add rowinstead of container-fluid.
尝试添加row而不是container-fluid.
<style>
.container { background: #ccc;}
.fullwidth { background: #000;}
</style>
<div class="fullwidth">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>content</p>
</div>
</div>
</div>
</div>
回答by Temi
Your .container-fluid is the one that has no maximum width and can stretch at a full viewpoint. to get the result you want, the .container-fluid has to come before the .container
你的 .container-fluid 是没有最大宽度的，可以在一个完整的视点拉伸。为了得到你想要的结果，.container-fluid 必须在 .container 之前
