Bootstrap col- *不占全宽

Question

我有以下代码：

<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>

问题是，所有.row div都占用父外部div的全宽（如预期的那样） 但是那些col-lg-12或（col-lg-6 + col-lg-6）的人没有占据整个宽度。

我期待黑盒子在红盒子里面平分。我没有将任何其他样式应用于HTML。

Answer 1

因为他们的父母是col-lg-6，所以请更改为col-lg-12

详细了解twitter-bootsrap网格here

更新 - 基于您的更新

你有额外的不必要的标记。请参阅下面的代码段：

<强>段

<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>

Answer 2

使用class＆＃34; container-fluid＆＃34;添加div容器最大宽度：900px;

例如，

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;
}