Bootstrap: Bootstrap 4 columns not working properly on Safari

Created on 3 Oct 2017  路  14Comments  路  Source: twbs/bootstrap

I made a website with Bootstrap 4 and everything works fine except auto wrap columns on Safari 10.1.1 on MacOS.
When number of columns in a row is equal to 12, then the last column jumps to the new line instead of wrap to previous column. When number of columns is smaller than 12 there is no problem.

For example my top header:
<div class="container">
<div class="row">
<div class="col-lg-3">logo</div>
<div class="col-lg-9">menu</div>
</div>
</div>
On Chrome and Firefox logo and menu are in one line but on Safari menu starts in a new line (screen from Safari):
https://imgur.com/a/xTv9m

This looks like flexbug#11 and when I'm setting flex-basis to the columns the problem still occurs.
I tried also with the border 1px transparent workaround but also without success.

This issue appears also on another sections in my website where I used 12 columns in a row.

awaiting-reply css v4

Most helpful comment

In my case I overrode the class __.row:before, row:after__, and set __display: inline-block;__ That did the trick and did not affect Chrome and Firefox

All 14 comments

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin or CodePen and report back with your link, Bootstrap version, and specific browser and OS details.

The best way to show the problem is a live site: https://en.etrose.com because there is more section with this problem than only header.

Bootstrap version: 4.0.0-alpha.6
OS: OS X El Capitan v. 10.11.6 (15G1421)
Browser: Safari 10.1.1 (11603.2.5)

Sorry but we can debug on a live site because they are a lot of custom style applied + you don't use our last release (beta 1)

Ok, I found what generate problem. I was delete this line .row:before { content: " "; }

In my case I overrode the class __.row:before, row:after__, and set __display: inline-block;__ That did the trick and did not affect Chrome and Firefox

@pimisi thank you this simple solution also helped me!

@pimisi You just saved my life. Thanks!!

@pimisi can you show us how to do to override bootstrap property ?

@pimisi Thanks!!

@pimisi Thank you so much, mate!!!

Im having the same problem
url: https://thisquarterly.sg/

@carlo-activamedia I loaded the url and cannot see where you have this issue.

Cheers!

Your the $h!T and I love you baby! You also saved Jackie's life!

Was this page helpful?
0 / 5 - 0 ratings