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但我会将边框添加到某种内包装。

Bootstrap列的宽度不一样

1 个答案: