After creating a website using Bootstrap 4, I encountered an issue where every column in a row starts on a new line instead of wrapping to the previous one when the number of columns is equal to 12. This problem seems similar to flexbug#11, and attempts to set borders or adjust flex-basis did not resolve it.
The problem vanished when I slightly reduced the flex-basis to 49.9% instead of 50% in col-6. However, this fix does not apply universally across all sections. Are there any alternative solutions to address this bug? Do you require additional information from my end? Thank you for your assistance!
Excerpt from the header:
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>Screenshots taken from Chrome and Safari: https://i.sstatic.net/jkJBk.jpg https://i.sstatic.net/KdqLT.jpg