css - Bootstrap 4 上的非 12 整除相等列

Question

我有一个小网络应用程序，我想显示 5 列响应等宽。

但我只希望这种布局适用于宽度≥992px 的设备。 对于宽度 <992px 的设备，我想在一个全 Angular 行中显示 5 个 HTML 元素。

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border.

Two workarounds have been documented in a reduced test case outside Bootstrap, though if the browser is up to date this shouldn’t be necessary.

来源:https://getbootstrap.com/docs/4.0/layout/grid/

所以，我对如何使用 Bootstrap 4 实现我想要的这种响应行为感到有点困惑。

我有这个“想法”，但我觉得会很丑，你怎么看？

让我们考虑一下这个标记

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
  </div>
</div>

然后，使用 jQuery，我可以选择 .sep 并在宽度 <992px 的情况下添加 bootstrap4 类 w-100。

感谢阅读，请原谅我糟糕的英语。

Answer 1

也许我不明白这个问题。为什么不直接使用 lg 自动布局列 (col-lg)？

https://www.codeply.com/go/OohsSfM7Zu

<div class="row">
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
</div>