Bootstrap - почему текст начинает дюйм слева от окна браузера слева?

Question

Вот мой упрощенный HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
 

 
<div class="container"> 
 
    <div class="navbar"> 
 
    <div class="navbar-inner"> 
 
     <ul class="nav"> 
 
     <li><a href="/index">Home</a></li> 
 
     <li><a href="/search">Search</a></li> 
 
     <li><a href="/logout">Log out</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-12" > 
 
     <div class="row"> 
 
     <div class="col-md-6" > 
 
      <p><h4>Top Left</h4> 
 
     </div> 
 
     <div class="col-md-6" > 
 
      <p><h4>Top Right</h4> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-6" > 
 
      <p><h4>Bottom Left</h4> 
 
     </div> 
 
     <div class="col-md-6" > 
 
      <p><h4>Bottom Right</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Вот что я ожидаю увидеть в браузере:

Home  Search  Log out 

Top Left   Top Right 

Bottom Left  Bottom Right 

Вот что я вижу, как в Firefox и Chrome:

Home  Search  Log out 

p Left   
p Right 

tom Left   
tom Right 

W гип?

Answer 1

Это потому, что вы определяете размеры экрана среднего размера и проверяете его на маленьком или дополнительном маленьком экране. Вам нужно явно указать размеры для них. Добавьте col-sm-* для маленьких экранов и col-xs-* для дополнительных маленьких экранов.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
 

 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    
 
    <ul class="nav navbar-nav col-md-12"> 
 
     <li class=" col-md-4 col-xs-4 "><a href="/index">Home</a></li> 
 
     <li class=" col-md-4 col-xs-4 "><a href="/search">Search</a></li> 
 
     <li class=" col-md-4 col-xs-4"><a href="/logout">Log out</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12" > 
 
     <div class="row"> 
 
     <div class="col-md-6 col-sm-6 col-xs-6" > 
 
      <p><h4>Top Left</h4> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-6" > 
 
      <p><h4>Top Right</h4> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-6 col-sm-6 col-xs-6" > 
 
      <p><h4>Bottom Left</h4> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-6" > 
 
      <p><h4>Bottom Right</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>