javascript - 当有足够的可用空间时，如何在窗口宽度上均匀地间隔列？

Question

我在 div 上使用 Bootstrap 的 col-lg-12。当有可用的列(/数据)时，它会很好地显示列。邮电局:

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

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

Answer 1

如果我正确理解您的问题...您还使用 col-lg-2 来显示您的图 block 。因此，您需要应用 col-lg-## 的动态 Bootstrap 类，其中 ## 是 12/(图 block 数)。

<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 为 4x3 = 12。

此外，当您有许多不能分成 12 block (例如 5 或 7 - 11)的图 block 时，您还需要决定要做什么

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