当有足够的可用空间时，如何在窗口宽度上均匀分布列？答案

【问题标题】：How to evenly space columns across window width when there is sufficient space available?当有足够的可用空间时，如何在窗口宽度上均匀分布列？
【发布时间】：2018-02-04 08:34:59
【问题描述】：

我在 div 上使用 Bootstrap 的 col-lg-12。当有可用列（/数据）时，它会很好地显示列。邮政总局：

但是当没有足够的信息可用时，右侧的空间保持空白。邮政总局：

在这种情况下，是否可以动态扩展可用列/div的宽度以占据整个窗口？

【问题讨论】：

请发布您的代码
是的代码会很有帮助，但如果我正确理解你的问题......你也在使用 col-lg-2 来显示你的瓷砖。因此，您将需要应用 col-lg-## 的动态引导类，其中 ## 12/（图块数）。即，第二张图片中的图块将是 col-lg-4，即 4x3 = 12。此外，当您有许多不分成 12 块的图块（例如 5 或 7 - 11）时，您需要决定该怎么做.
如果您已经在使用引导程序，则您没有有使用引导程序网格。这可以使用带有justify-content: space-around; 的 flexbox 轻松完成。
嗨@fjoe，明白了。非常感谢！ :-)
如果您愿意使用 Masonry，它会在这里工作得很好。

标签： javascript css twitter-bootstrap reactjs

【解决方案1】：

如果我正确理解了您的问题...您还使用 col-lg-2 来显示您的图块。因此，您将需要应用 col-lg-## 的动态引导类，其中 ## 是 12/（图块数）。

<div class="col-lg-12">
    <div class="row">
        <div class="col-lg-##"></div>
        <div class="col-lg-##"></div>
        <div class="col-lg-##"></div>
    </div>
</div>

在你的第二张图片中 ## 将 col-lg-4 as 4x3 = 12.

此外，当您有许多不分成 12 个的图块（例如 5 或 7 - 11）时，您需要决定该怎么做

正如人们评论的那样，您可以使用其他选项和框架来完全解决此问题，但这会直接回答您的问题并使用 Bootstrap。

【讨论】：