css - Bootstrap 列的宽度不一样

Question

我正在试用 Bootstrap，但是当我使用这段代码创建 1 个导航栏然后创建 2 个内容框时，它们的宽度不一样......即使宽度加起来都是 12:

<div class="row" id="preview">
    <!-- sidebar 1-->
    <div class="col-md-4 column" id="sidebar" style="border:1px solid; height:600px;"></div>
    <!-- main contents -->
    <div class="col-md-8 column">
        <div class="row" id="main_contents">
            <div class="col-md-4 column" id="content1" style="border:1px solid; height:600px;"></div>
            <div class="col-md-4 column" id="content2" style="border:1px solid; height:600px;"></div>
        </div>
    </div>
</div>

我也试过了，结果是一样的:

<div class="row" id="preview">
    <!-- sidebar 1-->
    <div class="col-md-4 column" id="sidebar" style="border:1px solid; height:600px;"></div>
    <!-- main contents -->
    <div class="col-md-8 column">
        <div class="col-md-4 column" id="content1" style="border:1px solid; height:600px;"></div>
        <div class="col-md-4 column" id="content2" style="border:1px solid; height:600px;"></div>
    </div>
</div>

Answer 1

在 bootstrap 3 中，所有列的大小都是百分比，而不是像 v2 中那样固定。

现在每一行的列加起来应该是 12。

将那些内部 col-md-4 更改为 col-md-6，您应该没问题。

此外，我强烈建议不要通过添加边框来篡改它们的宽度。理论上你应该没问题，因为他们使用 box-sizing: border-box 但我会将边框添加到某种内部包装器中。