トグルなしでBootstrap NavBarのサインインボタンを右揃えにする方法は？

Twitter Bootstrapを使用して、Webサイトのサインアップページのヘッダーバーを作成しようとしています。トグルなしでBootstrap NavBarのサインインボタンを右揃えにする方法は？

<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <a href="#" class="navbar-brand">Brand</a> 
      </div> 
      <button type="button" class="btn btn-default navbar-btn">Sign in</button> 
     </div> 

     <div class="pull-right"> 
      <ul class="nav navbar-nav"> 
       <li><button type="submit" class="btn navbar-btn" >Sign In</button></li> 
      </ul>  
     </div>   
    </nav> 
</body>

私は」didnの：私は私のウェブサイトの名前でブランドを置き換えるために、その後、私は、ナビゲーションバーの右側にそれとは反対サインインボタンをつけたいと思いたいdocumentationパー[サインイン]ボタンを電話機のトグルボタンに変更しないようにするため、[navbar-toggle collapsed]ボタンをコードに挿入しないでください。代わりに、私はちょうどコンピュータブラウザのようにNavbarの右側にサインインボタンを表示するだけです。私が抱えている問題は、上記のコードでは、左上隅にブランドリンクがあり、右下隅にサインインボタンがある電話機に背の高い2列（またはそれ）のナビゲーションバーが作成されています。 navbar。ブランドリンクとサインインボタンが同じ行で互いに向き合うようにこのコードを変更するにはどうすればよいですか？ボタンを左または右に移動する方法を示すすべての例では、電話機にトグルボタンを表示すると仮定しています。私はしません。すべてのデバイスにサインインボタンが表示されます。

ありがとうございました。

出典

2016-05-25 William

これを達成できる方法はたくさんありますが、それを処理するためにはブートストラップに頼っている限りは考えられません。

簡単な解決方法は、ログインボタンabsolutelyです。

参照実施例：

.navbar .login-btn { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 15px; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar .login-btn { 
 
    right: 75px; 
 
    } 
 
}

<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.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 

 
     <a href="#" class="navbar-brand">Website Name</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <button type="submit" class="btn btn-danger navbar-btn login-btn">Sign In</button> 
 

 
    </div> 
 
</nav>

出典

2016-05-25 23:58:14 vanburen

ありがとうございました！これはうまくいった。私はBootstrapには新しく、Bootstrapで何ができるのか、またその外で何をしなければならないのかはまだ分かっていません。私は本当にあなたの助けに感謝します！ – William

トグルなしでBootstrap NavBarのサインインボタンを右揃えにする方法は？

答えて

関連する問題