1. 首頁
  2. 問答
  3. Bootstrap導航欄：導航欄 - 右

Bootstrap導航欄：導航欄 - 右

2016-04-29 209 views
0

我正在使用bootstrap創建此簡單的導航欄。我是使用bootstrap和css進行網頁設計的新手。Bootstrap導航欄：導航欄 - 右

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

    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"></a> 
    </div> 
    <ul class="nav navbar-nav"> 

     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     </li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Comments<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Reports</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
     </ul> 
     </li>  
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Sign Out</a></li> 
    </ul> 
    </div> 

    </div> 
    <div> 
</div> 
</body>

註銷鏈接位於導航欄的邊緣。它沒有右邊的空間。我想要的是在另一邊有相同的空間。我曾嘗試創建一個CSS類，並添加邊距和填充，但它不起作用。

來源

2016-04-29 guwop69

+0

你有你想要的圖像實現，因爲我沒有真正得到你想要做的 – Evochrome

+0

註銷鏈接位於導航欄的邊緣。我希望它有空間。 – guwop69

回答

0

在第二行添加一個div =「容器」後「導航欄導航欄默認，將持有的導航欄，並設置頁邊距

來源

2016-04-29 15:21:01

0

試試這個：

HTML

<ul class="nav navbar-nav navbar-right"> 
     <li><a class="signout" href="#">Sign Out</a></li> 
    </ul>

CSS

ul.nav.navbar-nav.navbar-right > li > a{ 
    margin-right: 30px; 
}

例：

https://jsfiddle.net/w776Lq1u/7/

來源

2016-04-29 15:21:48 Sylvain

0

如果添加導航欄的可摺疊部分就增加了你想要的填充。現在，當您移動屏幕尺寸時，您的導航欄鏈接顯示爲塊，並且沒有響應菜單按鈕。將瀏覽器窗口調整爲較小的寬度以查看我在說什麼。如果您添加了導航欄摺疊和摺疊按鈕，那麼導航欄摺疊將添加您需要的填充並使導航欄響應。所以，您的標記將如下所示：

這裏向您展示它應該如何看Fiddle

<div class="container"> 
    <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo</a> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Comments<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Reports</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
      </ul> 
      </li>  
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Sign Out</a></li> 
     </ul> 
    </div> 
    <div> 
</div>

來源

2016-04-29 15:24:25

2

我能達到你想建立一個零邊距爲您的權利導航欄什麼小提琴。通過這樣做，我只是「破」的元素的浮動，它會自動上了右手，左手側不對齊：

<ul class="nav navbar-nav navbar-right no-margin"> 
    <li><a href="#">Sign Out</a></li> 
</ul> 

.no-margin { 
    margin: 0; 
}

Live Demo

來源

2016-04-29 15:28:26 Aer0

相關問題

 相關問題