ブートストラップ - ブラウザウィンドウの左端からテキストが1インチ左に移動するのはなぜですか？

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>