html - Bootstrap col-* 不占全 Angular

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

UPDATE - 基于你的更新

您有多余的不必要标记。所以请看下面的片段:

片段

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