アイテムが中間にあるブートストラップNavbar

Question

「Navbar-brand」が左側、navbarアイテムが中央に、2アイテムがBootstrapで作成しようとしています。私は最初からそれを作ろうとしましたが、十分に反応するようにはできませんでした。

次に、このアプローチはBootplyにあります。これは、すべての応答性とナビゲーションバーが崩壊するのに本当に近いです。しかし、私はnavbar-brandとleft itemsを交換したい。ブランドは左にあり、左のアイテムは中にあります。右の項目はその位置を保持します。

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

これを達成する最も簡単で便利な方法は何ですか？ここで

はスニペットです：

あなたが（そうタブレット&デスクトップ上にあるように、それを制限する .navbar-leftに CSSのポジショニングを使用してCSS transformを使用して中央でそれを行うことができます

.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-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