Twitter Bootstrap Question posted in

Bootstrap 4 grid issue only on Safari-Twitter bootstrap

I made a whole website using Bootstrap 4. Now I noticed that if number of columns in a row is equal to 12 every column start in a new line instead of wrapping to previous. When number of columns is smaller (like 10) there is no problem. This looks like a flexbug#11 but when I’m trying to set border 1px or set flex-basis to the columns problem still occurs.

Problem disappears when I’m setting little lower flex-basis like 49.9% instead of 50% to the col-6, but I think that isn’t right way to solve this problem, because this not working in all sections.

Have you another way to fix this bug? Do you need more information from me? Thanks for help!

Header sample:

ul li {
  display: inline-block;
 }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="ccfw-site-logo">
        <a href="/" class="custom-logo-link" rel="home">
          <img src="/wp-content/uploads/2017/09/logo.png" srcset="/wp-content/uploads/2017/10/[email protected] 2x" alt="etrose logo" />
        </a>
      </div>
    </div>
    <div class="col-9">
      <div class="ccfw-primary-nav clearfix">
        <ul>
        <li><a href="/"><span>Home</span></a></li>
          <li><a href="#onas"><span>About us</span></a></li>
          <li><a href="#wartosci"><span>Our vision</span></a></li>
          <li><a href="/uslugi"><span>Services</span></a></li>
          <li><a href="/praca"><span>Job offers</span></a></li>
          <li><a href="/kontakt"><span>Contact</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

And screenshots from Chrome and Safari:
enter image description here
enter image description here

Tags:

2

Answers


  1. 0

    Screenshot

    replace css old code to this code

    .ccfw-site-logo a {
line-height: normal !important;
}
    Login or Signup to reply.
  2. 0

    Probably related to this: Bootstrap 4 Safari on Mac Grid issue

    the problem seems to be how safari handles the .row:after, .row:before{display:table;}
    causing the .cols inside the .row to wrap.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search