引導權利navibar凌亂如何解決這個問題？

我想添加引導權利navibar凌亂如何解決這個問題？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<nav class="navbar navbar-default"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t <a class="navbar-brand" href="#">Mean Office</a> 
 
\t \t \t </div> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t <li><a href="" title="">Other contacts</a></li> 
 
\t \t \t \t <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </nav> 
 
    </div>

在上面的例子中，我的退出按鈕會導航欄之外。這裏有什麼問題？如何解決這個問題？

來源

2016-11-18 user2024080

你能在這裏分享你的代碼嗎？ – chinmayahd

CSS - 代碼？我不寫我的任何CSS代碼。只需使用libraray – user2024080

你正在導航欄在側.container class和自舉容器類有固定的寬度1140px + 30像素填充大型視圖，以便外面導覽列溢出父容器.navbar class後再次採取了同樣的container class。

[body > .container > .navbar > .container]

要解決它，你必須刪除第一.container並把<nav class='navbar'>直接body標籤，並把容器或容器流體導航欄裏面。

變化[body > .navbar > .container OR .container-fluid]

ONE MORE要說

[熟能生巧]

來源

2016-11-18 11:58:14 Draval

這不是一件導航欄之外。你嵌套了兩個容器。 container中的填充在此處播放。

<div class="container"> 
<nav class="navbar navbar-default"> 
     <div class="container">

container在自舉是具有padding-right:15px , padding-left:15px1170px寬度（我在屏幕resoultion查看它> 1200像素）。您的導航欄具有1140px現在總空間。（1170px - 30PX = 1140px），其具有背景COLORE屬性。當你再次添加一個容器時，它佔用1170px的空間，超過1140px。所以在雙方中，都增加了一個額外的15px空白區域。更進一步，嵌套的「navbar-right」有「margin-right:-15px」，將您的nav進一步推入。

簡單的構造是這樣的：

<div class="container"> 
    <nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Mean Office</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav navbar-right "> 
     <li><a href="" title="">Other contacts</a></li> 
     <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li> 
     </ul> 
    </div> 
    </nav> 
</div>

來源

2016-11-18 12:01:48 Swapna

這是自舉導航欄是如何製造：

導航欄沒有container包裹它，但container-fluid裏面：

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

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Mean Office</a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="" title="">Other contacts</a> 
 
     </li> 
 
     <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

P.S .:查看整個頁面的結果以獲得更好的觀看效果

來源

2016-11-18 12:15:31

引導權利navibar凌亂如何解決這個問題？

回答

相關問題