CODEWITHSUNDEEP
htmltwitter-bootstrapcssweb
Non-native English Speaker
Non-native English Speaker

Reputation: 111

Bootstrap nav-justified failed

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>

Upvotes: 0

Views: 640

Answers (1)

Ayman Safadi
Ayman Safadi

Reputation: 11562

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.

Upvotes: 1

Related Questions