1. ホーム
  2. 質問と答え
  3. ブートストラップナビゲーションバー：navbar-right

ブートストラップナビゲーションバー：navbar-right

2016-04-29 14 views
0

私はこの簡単なナビゲーションバーをブートストラップを使って作成しています。私はブートストラップとCSSを使ってウェブをデザインするのが新しいです。ブートストラップナビゲーションバー：navbar-right

<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

ナビゲーションバーとセットマージンを保持する「ナビゲーションバーナビゲーションバー、デフォルト後の第2のライン上の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; 
}

Exemple：

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

出典

2016-04-29 15:21:48 Sylvain

0

あなたはそれはあなたが望むパディングを追加するナビゲーションバーの折りたたみ式の部分を追加した場合。今すぐモバイル画面サイズに移動すると、navbarリンクがブロックとして表示され、反応するメニューボタンが表示されません。私が話していることを見るためにあなたのブラウザウインドウのサイズを小さくしてください。あなたがnavbar-collapseとcollapseボタンを追加すると、navbar collapseが必要なパディングを追加し、navbarを応答させます。だからあなたのマークアップは、次のようになります。ここでは

は、それが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

関連する問題

 関連する問題