Question

我使用引导网格布局动态渲染列。

这是我使用的逻辑

如果要为每一行渲染N个控件列。 col-lg- {}数基于结果（控制数）/ 12决定。

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

bootstrap＆＃34; row＆＃34; here。

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

有关如何解决这个问题的任何建议？如果问题不明确，请告诉我。

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

Answer 2

每一行都会使用不同数量的控件呈现控件（列）。

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

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

当前实现基于浏览器宽度决定，哪个控件保留在行上，哪个控件停止。

我渲染div列，显示设置为内联块。

风格=＆＃34;显示：内联块＆＃34;

现在基于浏览器宽度以及列是否适合控件将被渲染，如果不是，则列控件将显示在下面。

此显示属性在没有引导程序更改的情况下使用。

bootstrap行移动控件，不适合行到下一行

2 个答案: