固定導航欄上的Bootstrap徽標

Question

我試圖根據徽標高度將導航欄線（顯然還有內容）向下推。這裏是我的HTML代碼：

<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header transparent"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a> 

     <div class="row"> 
      <div class="col-lg-12 custom-navbar-line"> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav nav-pills custom-nav-pills"> 
         <li class="active"><a ng-href="#">Home</a></li> 
         <li><a ng-href="#">Page1</a></li> 
         <li><a ng-href="#">Page2</a></li> 
         <li><a ng-href="#">Page3</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我想要什麼：

我得到什麼：

注：自定義CSS類沒有很多工作要做，定位。

Answer 1

你可以嘗試這樣的事：

HTML：

<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a> 

CSS：

a.navbar-brand { /*or add another class instead of changing this*/ 
    display:block; 
    margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */ 
} 

只要保持一定的利潤率在top和<a>標籤的bottom。不要依賴於其他元素的<a>標籤的邊距，而應將css規則應用於其邊緣。

或者只是把裏面的另一.row：

<div class='row'> 
    <a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a> 
</div> 

Answer 2

閉上你的<div class="container">並打開一個新container用保證金頂部導航欄的第二排左右。

Bootply example

更新HTML：

<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header transparent"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a> 
    </div> 
    <div class="container new-nav-line"> 
     <div class="row"> 
      <div class="col-lg-12 custom-navbar-line"> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav nav-pills custom-nav-pills"> 
         <li class="active"><a ng-href="#">Home</a></li> 
         <li><a ng-href="#">Page1</a></li> 
         <li><a ng-href="#">Page2</a></li> 
         <li><a ng-href="#">Page3</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.new-nav-line{ 
    margin-top:20px; 
}