Bootstrap nav-justified failed

StackOverflow https://stackoverflow.com/questions/23577171

Question

I'm trying to use Bootstrap to build a webpage. I created a navigation bar using the class nav-justified. Then I run it on safari and chrome, but this problem occurs: When i drag the window to resize it small and then resize to the original size, these tabs stack together. Why did it happen and how can I avoid this? This is bootstrap V3.1.1.

Original one: correct one Stacked one: stack together

<!DOCTYPE html>
<html>
  <head>
    <link href="./css/bootstrap.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
        <ul class="nav nav-justified">
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li> 
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>  
        </ul>
    </div>
  </body>
</html>
Was it helpful?

Solution

The Bootstrap docs make a mention of a bug in Safari regarding its inability to properly deal with decimal percentages for the column-grid.

The bug report has a few anecdotes of how people solved found a way around this issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top