Html 引导网格：divs布局出现意外结果

我有以下代码：

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

结果是：

---

什么会导致这种情况发生？

尝试使用引导中定义的其他类，如下所示：

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

*一些内容*
*一些内容*
*一些内容*
*一些内容*
*一些内容*

这将有助于格式化

标记的位置。 在使用这些类之前，定义需要的

col sm-*

数量是很重要的。
您可以在

中使用

class=“col-sm-offset-4”

来“跳过”定义的一些col，并使第二行在浏览器中进行更适当的调整

---

希望对您有所帮助。

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

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

*一些内容*
*一些内容*
*一些内容*
*一些内容*
*一些内容*

---

在中，您还可以设置一个外部

容器

包装所有内容，请查看文档

嘿，谢谢你的回答。每件事都是一个很大的事实，即sm-*列的数量未知，可以是3或15。你认为你的解决方案仍然合适吗？看看flexbox，它可能更适合你必须做的事情