twitter-bootstrap Bootstrap col-* 不占全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35276910/
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 col-* not taking full width
提问by Mahesh
I have the following code:
我有以下代码：
<div class="row row-space">
<div class="row" style="border: 1px solid red;">
<div class="col-lg-6" style="border: 1px solid black;">
<div class="row">
<div>CHILD A</div>
</div>
</div>
<div class="col-lg-6" style="border: 1px solid black;">
<div class="row">
<div>CHILD B</div>
</div>
</div>
</div>
</div>
The problem is, all .rowdivs take full width of parent outer div (as expected)
but the ones with col-lg-12or (col-lg-6+ col-lg-6) are not taking the full width.
问题是，所有.rowdiv 都采用父外部 div 的全宽（如预期），但带有col-lg-12或 ( col-lg-6+ col-lg-6) 的div没有采用全宽。
I am expecting the black boxes to be divided equally inside the red box. I am not applying any other styles to the HTML.
我希望黑盒子在红盒子内平分。我没有将任何其他样式应用于 HTML。
回答by dippas
Because their parent is col-lg-6, change to col-lg-12
因为他们的父母是col-lg-6，改为col-lg-12
See more about twitter-bootsrap grid here
在此处查看有关 twitter-bootsrap 网格的更多信息
UPDATE-based on your updated as well
更新 -基于您的更新以及
You have extra unnecessary markup. So see snippet below:
你有额外的不必要的标记。所以看下面的片段：
Snippet
片段
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-space" style="border: 1px solid red">
<div class="col-lg-6" style="border: 1px solid black;">
<div>CHILD A</div>
</div>
<div class="col-lg-6" style="border: 1px solid black;">
<div>CHILD B</div>
</div>
</div>回答by reatlat
add div container with class "container-fluid" with max-width: 900px;
添加 div 容器，类为“container-fluid”，最大宽度为 900px；
for example codepen.io
例如 codepen.io
<div class="container-fluid">
<div class="row row-space">
<div style="border: 1px solid red;" class="row">
<div style="border: 1px solid black;" class="col-lg-6">
<div class="row">
<div>CHILD A</div>
</div>
</div>
<div style="border: 1px solid black;" class="col-lg-6">
<div class="row">
<div>CHILD B</div>
</div>
</div>
</div>
</div>
.container-fluid{
max-width: 900px;
}
