고정 된 나비 막대 위에 부트 스트랩 로고

Question

로고 높이에 따라 navbar 줄 (그리고 내용도 분명히)을 내려고했습니다. 여기 내 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에 약간의 마진을 유지한다. 그 태그의 여백에 다른 요소를 사용하지 말고 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; 
}