Safari и Bootstrap 4 - автоматическая сетка разбивает

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 так же, как ожидалось. Однако в сафари он не будет переноситься в следующую строку, но выходит за пределы полей страницы.

Есть ли работа вокруг?

Обратите внимание, что в зависимости от ширины вашего видового экрана вы должны добавить кучу <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. Это может или не может достигнуть того, что вам нужно - вы, вероятно, можете настроить его, поддержка Bootstrap 4 flex довольно эффективна, так как alpha6.

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