html - Safari 和 Bootstrap 4 - 自动网格中断

Question

这个 bootstrap 4 代码

<div class="container-fluid">
    <div class="row">
        <div class="col"><small>Some text here</small></div>
        <div class="col"><small>Some text here</small></div>
        <div class="col"><small>Some text here</small></div>
        .... add more columns until they should wrap
        <div class="col"><small>Some text here</small></div>
        <div class="col"><small>Some text here</small></div>
    </div>
</div>

将按预期在 Chrome 和 firefox 中自动换行。但是，在 Safari 中，它不会换行到下一行，而是超出页边距。

有变通办法吗？

请注意 - 根据您的视口(viewport)宽度 - 您必须添加一堆 <div class="col"><small>Some text here</small></div>使效果可见。

Answer 1

您可以尝试使用 flexbox，例如

<div class="container-fluid">
    <div class="row">
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
        <div class="d-flex p-2"><small>Some text here</small></div>
    </div>
</div>

参见 this fiddle .这可能会或可能不会实现您所追求的 - 您可能会对其进行调整，自 alpha6 以来，Bootstrap 4 flex 支持非常强大。

http://v4-alpha.getbootstrap.com/utilities/flexbox/