ブートストラップ4 Navbar right right

Question

Bootstrap 4ウェブサイトからnavbarテンプレートを作成していますが、折りたたみナビアイテムの位置に関する問題があります。もともと、トグルボタンは、リストアイテムと同様に、ナビゲーションバーの左側に配置されています。

しかし、私はそれらをページの右側に置きたいので、ボタンとナビゲーション項目にfloat-xs-rightクラスを挿入しました。トグルボタンをクリックすると、折りたたみアイテムが正しく配置されません。あなたがスクリーンショットで見ることができるように。

Navbar screenshot

私は崩壊項目が下にして左側に位置することにしたいです。

ところで、ここに私のコードです：

<nav class="navbar navbar-light bg-faded"> 
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 

<div class="collapse navbar-toggleable-md" id="main-navbar"> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Bio</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Gallery</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Details</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Awards</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">More info</a> 
    </li> 
    </ul> 
</div> 
</nav> 

はまた、ここでは、このナビゲーションバーのための私のcodepenです：

http://codepen.io/marcvs/pen/PGvqBO

は、事前にありがとうございます。

Answer 1

：Bootstrap 4 align navbar item to the right

これはそれを行うための適切な方法です。デフォルトで左にメニューを浮動させたいとします。 （float-xs-right）すべてのボタンをフロートしてください（hidden-lg-up）float-lg-rightulあなたが望むように動作するためには見えません。

このcodepenを参照してください：

http://codepen.io/anon/pen/mAYAKd?editors=1100

それは正常に動作します。

（注）この追加CSS：

@media screen and (max-width: 992px){ 
    #main-navbar { 
     clear: both; 
    } 
} 

HTML：

<nav class="navbar navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 

    <div class="collapse navbar-toggleable-md" id="main-navbar"> 
     <ul class="nav navbar-nav float-lg-right"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Bio</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Gallery</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Details</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Awards</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">More info</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 

Answer 2

こんにちは次の例を参照してください。私はそれを別の方法で行いましたが、これを探していることを願っています。

<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data- 
    target="#navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    &nbsp; 
    </div> 
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1">  
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Bio</a></li> 
    <li><a href="#">Details</a></li> 
    <li><a href="#">Award</a></li> 
    <li><a href="#">More info</a></li> 

    </ul> 
    </div> 
    </nav> 

を参照してくださいザ・フィドルNavBar Fiddle Demo

ことができます願っています。ブートストラップ4アルファ6/Betaの