爲什麼我使用Twitter Bootstrap獲得太多的填充像素？

-1

我使用bootstrap製作了標題原型。問題是我不明白爲什麼我有這麼大的填充右側。如果我在КорзинаHTML給我一個新行後再添加一個字母。我怎麼能擺脫這個自由空間？這裏是圖像爲什麼我使用Twitter Bootstrap獲得太多的填充像素？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <!-- Navigation --> 
 
    <!-- Heading beginning --> 
 
    <div class="container"> 
 
     <div class="jumbotron"> 
 
     <div class="row"> 
 
      <div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div> 
 
      <div class="col-md-8"> 
 
      <input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm"> 
 
     <button type="button">Search</button> 
 
     <span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span> 
 
     <span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span> 
 
      </div> 
 
      <div class="col-md-8"> 
 
      <small>Например, лекарства для диабетиков</small> 
 
      </div> 
 
     </div> 
 
     <nav class="navbar navbar-inverse" role="navigation"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#">Start Bootstrap</a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 
        <li> 
 
         <a href="#">About</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Services</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </nav> 
 
     </div> 
 
    </div> 
 
    <!-- Heading end--> 
 
    </body>

來源

2016-08-17 Alexander Tolkachev

你需要增加COL-MD-8 COL-MD-10和浮動元素向右從右刪除空的空間。

這裏是更新的demo

來源

2016-08-17 13:06:50

爲什麼我使用Twitter Bootstrap獲得太多的填充像素？

回答

相關問題