引导行将不适合该行的控件移动到下一行答案

【问题标题】：bootstrap row move controls that dont fit in the row to the next line引导行将不适合该行的控件移动到下一行
【发布时间】：2014-10-06 18:49:46
【问题描述】：

我使用引导网格布局来动态呈现列。

这是我使用的逻辑

如果每行要呈现 N 个控件列。 col-lg-{} 数量是根据结果（控件数量）/12 决定的。

例如：如果有 6 个控件，那么每个 col 属性将包含 12/6 col-lg-2 ,col-md-2 col-sm-2 等

引导“行”here 的示例。

现在的问题是，如果我调整窗口的大小，行中的控件往往会减小其宽度并缩小其宽度！！。相反，我希望不适合该行的控件向下移动？

关于如何解决这个问题有什么建议吗？如果问题不清楚，请告诉我？

【问题讨论】：

如果每行使用超过 12 列，那么多余的列将换行到下一行。听起来这就是您要找的东西？

标签： css responsive-design twitter-bootstrap-3 fluid-layout

【解决方案1】：

它可能是你的 div 中的类的顺序。试试这个 bootply：http://www.bootply.com/j5Qoftk2ny

这是 html 的样子：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6">One</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Two</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Three</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Four</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Five</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Six</div>
  </div>
</div>

【讨论】：

元素中的类顺序不影响类样式的应用
大多数时候没有，但它可以：stackoverflow.com/a/15672815/725866。可能不是这里的罪魁祸首，但我无法解释为什么我的作品和他的作品 - 也许是因为我有一个容器 div？
看来您的解决方案是正确的，但我不明白您对课程顺序的意思。问题似乎是 OP 的列都是相同的 # - 即 col-sm-2 col-md-2 col-lg-2。
是的，他的列都是一样的，lg、sm和md使用完全相同的百分比。另外，他还忘记了固定行上数学的容器。

【解决方案2】：

每一行呈现具有不同数量的控件的控件（列）。

所以第一行可以有 3 个控件，第二行可以有 6 个控件。这些控件由用户设置。

所以这里的挑战是在上述情况下布局应该是什么。

当前的实现取决于浏览器的宽度，哪个控件停留在行上，哪个控件落下。

我在显示设置为 inline-block 的情况下渲染 div 列。

style="display:inline-block"

所以现在将根据浏览器宽度和列是否适合控件来呈现，如果不适合，列控件将显示在下方。

此显示属性无需引导更改即可使用。

【讨论】：