중간에 아이템이있는 부트 스트랩 Navbar

Question

왼쪽에는 'navbar-brand', 중간에 가운데 정렬 된 navbar 아이템, 오른쪽에는 2 아이템이있는 Bootstrap을 사용하여 navbar를 생성하려고합니다. 처음에 그것을 만들려고했지만 응답 성을 충분히 높일 수 없었습니다.

그런 다음이 접근법은 Bootply에 있으며, 이는 모든 응답 성과 navbar 축소로 정말 가깝습니다. 그러나 navbar 브랜드와 아이템을 교환하고 싶습니다. 중간에 왼쪽 아이템과 함께 왼쪽에있는 브랜드; 오른쪽 항목은 자신의 위치를 ​​유지합니다.

[ Navbar-Brand   Home | About | Contact | Address   Right, Right] 

달성하기위한 가장 쉬운 방법은 무엇입니까?

.navbar-brand { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    text-align: center; 
 
    margin:0 auto; 
 
} 
 
.navbar-toggle { 
 
    z-index:3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
    <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>  
 
    <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#about">Left</a></li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#about">Right</a></li> 
 
     <li><a href="#contact">Right</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

당신은 (정제 & 바탕 화면 등등 수를 제한 .navbar-left에 CSS의 위치를 사용하여 CSS transform를 사용하여 중앙에 그것을 만들 수 있습니다 : 여기

은 발췌문이다 모바일 레이아웃에는 영향을 미치지 않습니다). 이 도움이

.navbar-brand { 
 
    position: absolute; 
 
    width: auto; 
 
    left: 15px; 
 
    text-align: center; 
 
    margin:0 auto; 
 
} 
 

 
.navbar-toggle { 
 
    z-index:3; 
 
} 
 

 
/* On Tabs & Desktops */ 
 
@media screen and (min-width: 768px) { 
 
    .navbar-left { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
    <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>  
 
    <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#about">Left</a></li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#about">Right</a></li> 
 
     <li><a href="#contact">Right</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

희망 :

아래의 코드 조각에서 (사용 전체 화면)을 보라!

Answer 2

당신이 시도 할 수 있습니다 :

@media screen and (min-width: 768px) { 
    .navbar-collapse { 
     position: relative; 
    } 
    .navbar-left { 
     position: absolute; 
     width: 100%; 
     text-align: center; 
     top: 0; 
     left: 0; 
    } 
    .navbar-left > li > a { 
     display: inline-block; 
    } 
    .navbar-left > li { 
     display: inline; 
     float: none; 
    } 
} 

Codepen을 : https://codepen.io/anon/pen/GNYNey