부트 스트랩 센터링 전체 Navbar

Question

그래서 나는 지난 1 시간 동안이 문제를 끈기있게 쏴보고 시도해 보았고 약간 화가 나기 시작했습니다.

나는 (현재 왼쪽으로의 전체 내용을 가지고)이 네비게이션 바이 필요합니다. (롤, 페인트에서 만든) navbar left

는 다음과 같이하기를 중심으로 모든 내용을 가지고이 : navbar center edit

내가 찾은 유일한 솔루션은 nav 링크없이 센터 중심의 브랜드 또는 브랜드없이 센터 링크가있는 것뿐입니다.

HTML :

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-header "> 
     <a class="navbar-brand" href="#">SOUND HAUS</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/articles" style="color:#fff;">ARTICLES</a></li> 
      <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li> 
      <li><a href="/gallery" style="color:#fff;">GALLERY</a></li> 
      <li><a href="/contact" style="color:#c00618;">CONTACT</a></li> 
     </ul> 
    </div> 
</nav> 

CSS : 사전에

.navbar { 
    font-family: Long Shot; 
    background-color: black; 
    z-index: 998; 
} 

.navbar-brand { 
    font-size: 50px; 
    margin-top: 20px; 
    color: white !important; 
} 

.navbar-nav { 
    margin-top: 20px; 
    font-size: 20px; 
} 

감사합니다!

Answer 1

컨테이너를 탐색에 넣은 다음 덮어 쓰고 CSS 규칙을 부트 스트랩 규칙에 추가해야합니다.

<style> 
.container.nav{ 
    text-align:center 
} 
.navbar { 
    font-family: Long Shot; 
    background-color: black; 
    z-index: 998; 
} 

@media (min-width: 768px){ 
.navbar-header{ 
    max-width: 400px; 
    display: inline-block; 
} 

.navbar-header { 
    float: none; 
    } 

} 

@media (min-width: 768px){ 
.navbar-collapse.collapse{ 
    max-width: 600px; 
    display: inline-block; 
} 

.navbar-collapse.collapse { 
    display: inline-block !important; 
    } 
} 


.navbar-brand { 
    font-size: 50px; 
    margin-top: 20px; 
    color: white !important; 
} 

</style> 


<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container nav"> 
     <div class="navbar-header "> 
      <a class="navbar-brand" href="#">SOUND HAUS</a> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/articles" style="color:#fff;">ARTICLES</a></li> 
       <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li> 
       <li><a href="/gallery" style="color:#fff;">GALLERY</a></li> 
       <li><a href="/contact" style="color:#c00618;">CONTACT</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

은 내가 CSS 규칙 중 일부는 768px (이하 같은 경우에 남아)보다 큰 치수 수정해야했다 그리고 단지 div class="container nav" 을 추가했습니다. 그리고 내가 만든 스크린 샷입니다 :