Bootstrap网格：divs布局的意外结果

Question

我有以下代码：

<div class="row">
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
</div>

我希望有1行3个div，第2行有2个div。

结果是：

导致这种情况发生的原因是什么？

Answer 1

尝试使用bootstrap中定义的另一个类，如下所示：

<div class="row">
    <div class="col-xs-12 col-sm-12">
        <div class="box">
            <div class="box-content">
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
            </div>
        </div>
    </div>
</div>

这可以帮助您格式化<div>代码的位置。 在您使用这些课程之前，重要的是要确定您需要多少col-sm-* 您也可以在class="col-sm-offset-4"内使用<div>来＆＃34;跳过＆＃34;定义了一些cols，并在浏览器中更正确地调整第二行。

希望它对你有所帮助。

Answer 2

如何以默认方式使用行结构：

<div class="row">
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
</div>
<div class="row">
     <div class="col-sm-6">*some content*</div>
     <div class="col-sm-6">*some content*</div>
</div>

在standard bootstrap grid中你还要设置一个外部container包装所有内容，查看文档！