這個空間在哪裏創建以及如何修復？

-2

我想弄清楚爲什麼我的滑塊div沒有運行與我的標題div齊平。它被推下20px，我不知道爲什麼。我看過我的Chrome開發者工具，並看到nothign使它被推下20px。請不要幫助會很好。這裏是我的jsdFiddle鏈接：http://jsfiddle.net/Lparspfn/這個空間在哪裏創建以及如何修復？

HTML

<div id="body-container"> 
    <div class="base"> 
     <header> 
      <div class="top-nav"> 
       <p>Participant Login</p> 
       <p>Plan Sponsorship Login</p> 
       <p>RIA Login</p> 
      </div> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" 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="#">Brand</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 class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
         </ul> 
        </li> 
        </ul> 

       </div><!-- /.navbar-collapse --> 
       </div><!-- /.container-fluid --> 
      </nav> 
     </header> 
     <div class="slider-wrapper"></div> 
    </div><!-- End of base container --> 
</div><!-- End of body-container wrapper -->

來源

2014-09-22 Travis Michael Heller

你指的是藍色的酒吧？因爲這是由於.navbar底部的保證金造成的。 – kinakuta 2014-09-22 20:20:31

http://jsfiddle.net/Lparspfn/1/ – Anonymous 2014-09-22 20:22:07

使用具有良好開發人員工具的瀏覽器。然後通常可以檢查頁面的每個部分，並使用該區域的適當css。 – ne1410s 2014-09-22 20:24:24

在引導，導航欄類有一個20像素的底部邊緣。在來源：

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom:20px; 
    border: 1px solid transparent 
}

來源

2014-09-22 20:22:11 j08691

感謝您的幫助，想知道爲什麼它不會顯示在鍍鉻的檢查器工具中？ – 2014-09-22 20:27:15

它適合我，這就是我找到它的方式。 – j08691 2014-09-22 20:27:35

你的權利確實出現了，我跳過了一些如何。謝謝 – 2014-09-22 20:49:51

這個空間在哪裏創建以及如何修復？

回答

相關問題