Question

此引导程序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中，它不会包含在下一行中，而是超出页边距。

有解决方法吗？

请注意 - 根据您的视口宽度 - 您必须添加一堆<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/

Answer 2

我通过添加：

来编辑你的JSFiddle

 .row { width: 100%; }                                                 
 .col { display:inline-block !important; }

似乎它在做伎俩。我使用Safari 5.1.9，如果这可以帮助你。

干杯！

Safari和Bootstrap 4 - 自动网格划分

2 个答案: