Bootstrap導航欄品牌上面的菜單，直到調整大小和崩潰

我一直在尋找一個這樣的例子，找不到任何東西。我使用普通文本作爲我的導航品牌（無圖像），但字體爲200-300％，佔用大量空間。我想將名稱放在菜單上方。但是，當窗口調整大小時，我需要將其摺疊到導航欄的中心（鏈接摺疊時）。Bootstrap導航欄品牌上面的菜單，直到調整大小和崩潰

應該是這個樣子：

       WEBSITE NAME 
     link  link1 link2  link3 link4  link5

和摺疊成

       WEBSITE NAME    ==

所以，現在這是我使用的是什麼。以鏈接爲中心的文本，但由於不切實際的大小，鏈接溢出導航品牌。

<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; 
}

這不工作對我來說。

來源

2016-10-28 jonbon

關於你的鏈接的名稱和它們所代表的結構，它會去很長的路要走朝着澄清你的問題的意圖，尤其是對於那些稍後將它用作資源的話，如果它們匹配的話（在代碼中沒有任何地方會出現「link5」。） –

@BrandonBradley我可以稍後嘗試澄清一下，但是每個鏈接都是非常隨意的，我只是調用了一些LINK和在視覺中的人增加了。 – jonbon

這應該這樣做

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

來源

2016-10-31 09:24:21 warch

這適用於鏈接非常小的情況，但第二列中有更多鏈接溢出。 – jonbon

-1

所以我將這一點的代碼添加到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

是不是像你想？如果沒有，我很抱歉。

來源

2016-10-28 02:41:40 raimond

在上面的代碼中，導航欄品牌仍在導航欄中。所以，這真的不能做任何事情。 – jonbon

Bootstrap導航欄品牌上面的菜單，直到調整大小和崩潰

回答

相關問題