メニューの上のブートストラップnavbarブランドは、サイズ変更と折りたたみまで

Question

私はこれの例を探していて何も見つかりませんでした。私はnavbar-brand（画像なし）として通常のテキストを使用していますが、フォントは200〜300％であり、多くのスペースを占めます。メニューの上に名前を表示したいしかし、ウィンドウのサイズが変更されると、リンクが崩壊したときにNavバーの中央に崩壊する必要があります。だから、今、これは私が使用しているものです

       WEBSITE NAME 
     link  link1 link2  link3 link4  link5 

そして

       WEBSITE NAME    == 

に崩壊：

は、次のようになります。両側のリンクを中心としたテキストですが、リンクは非実用的なサイズのためにnavbarブランドの背後に流出しています。

<nav class="navbar navbar-default navbar-fixed-top" 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="#">BIG WEBSITE TITLE</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li id="nav">LINK for: </li> 
     <li id="nav"><a href="#"><i class="fa fa-mars" aria-hidden="true"></i> LINK</a></li> 
     <li id="nav"><a href="#"><i class="fa fa-venus" aria-hidden="true"></i> LINK</a></li> 
     <li id="nav"><a href="#">LINK</a></li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">LINK</a></li> 
     <li><a href="#">LINK</a></li> 
    </ul> 
    </div> 
</nav> 

いくつかのCSS

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

@media (min-width: 768px) { 
.navbar-brand, 
.navbar-nav li a { 
    line-height: 70px; 
    height: 70px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
} 
    .navbar-nav li { 
    line-height: 70px; 
    height: 70px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
    margin-left: 10px; 
} 
    .navbar-brand 
    { 
    font-size: 300%; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    vertical-align: middle; 
    margin: auto; 
} 

.navbar{ 
    background-color: #ZZZZZ; 
} 

これは私にとって全く機能していません。

Answer 1

これはあなたのリンクの名前と彼らが表現されている構造に関しては、それを

@media (min-width: 768px) { 
 
    .navbar-nav.navbar-center, .navbar-header-center { 
 
    margin-left: 50%; 
 
    transform: translateX(-50%); 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header navbar-header-center"> 
 
     <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="clearfix"></div> 
 
     <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-center"> 
 
      <li><a href="#">Link1</a></li> 
 
      <li><a href="#about">Link2</a></li> 
 
      <li><a href="#about">Link3</a></li> 
 
      <li><a href="#contact">Link4</a></li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 2

私はこのコードをCSSに追加しました。この効果のために

.navbar { 
    height:100px; 
} 

.nav.navbar-left{ 
    bottom: 0; 
    left: 0; 
    position:absolute; 
} 

.nav.navbar-right{ 
    bottom: 0; 
    right: 0; 
    position:absolute; 
} 

：https://gyazo.com/c5ae543c41b4383189e0d65b1869699f

はあなたのような何かが欲しかったということですか？そうでなければ、私は謝罪します。