web-dev-qa-db-ja.com

Bootstrap 4はナビゲーションバーの項目を右に揃えます

ナビゲーションバーの項目を右揃えにするにはどうすればよいですか。

私はログインして右に登録したいのですが。

Picture of Navbar

これは私がこれまでに試したことです。

  • 属性付きの<div>の周りの<ul>：style="float: right"
  • 属性付きの<div>の周りの<ul>：style="text-align: right"
  • <li>タグでこれら二つのことを試してみました
  • 最後に!importantを追加して、これらすべてのことをもう一度試してください。
  • nav-itemのnav-rightを<li>に変更
  • pull-sm-rightに<li>クラスを追加しました
  • align-content-endに<li>クラスを追加しました

これは私のコードです：

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
csstwitter-bootstrapflexboxbootstrap-4navbar
204
Luuk Wuijster

ブートストラップ4 にはナビゲーションバーの項目を整列させる 多くさまざまな方法があります 。ナビゲーションバーがflexboxになったため、float-rightは機能しません。

1st （left）mr-autoの自動右マージンに新しいnavbar-navを使用できます。 または 、ml-autoを 2nd （right）navbar-navに使用することも、単一のnavbar-navがある場合に限ります。

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>

http://www.codeply.com/go/P0G393rzfm

Flexbox utilsもあります。この場合、あなたは2つのnavbar-navsを持っているので、justify-content-betweenのnavbar-collapseはそれらの間のスペースさえもうまくいくでしょう、

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

Bootstrap 4.0以降用のアップデート

Bootstrap 4ベータ版では、ml-autoはまだアイテムを右にプッシュするように動作します。 navbar-toggleable-クラスがnavbar-expand-*に変更されたことに注意してください。

Bootstrap 4の navbarを右に更新しました

もう1つのよくあるBootstrap 4 Navbarの右揃えシナリオには、右側にモバイルの折りたたみの外側に留まる navというボタンが含まれているので、すべての幅で表示されます。

常に表示されている右揃えボタン

enter image description here

enter image description here

関連： 左寄せ、中央寄せ、または右寄せの項目を持つ_/Bootstrap NavBar

341
Zim

私の場合は、ナビゲーションボタン/オプションを1セットだけ使用したいのですが、これでうまくいくことがわかりました。

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

そのため、divにjustify-content-endを追加し、リストからmr-autoを省略します。

これが 作業例です 。

99
Craig van Tonder

まだBS4でこの問題に苦労している人のために単にコードの下に試してみてください - 

<ul class="navbar-nav ml-auto">
29
Muhammad Tarique

Bootsrap 4.0.0-beta.2では、ここにリストされた答えのどれも私のために働きませんでした。最後に、Bootstrapサイトは私にその解決策を与えました、そのドキュメントを通してではなく、そのページのソースコードを通して...

Getbootstrap.comは、navbar-navというクラスを利用して、自分の権利ml-md-autoを右揃えにします。

25
ClemC

ブートストラップ4の場合

ブランドを左側に、すべてのナビゲーション項目を右側に揃えたい場合は、デフォルトのmr-autoをml-autoに変更します

<ul class="navbar-nav ml-auto">
20
geet Sebastian

navにul justify-content-endを適用した後、ml-autoの代わりにmr-autoを使用

11
James Pike

nav-brandの直後にHome、Features、Pricingを残しておき、次にログインして右に登録してから、2つのリストを<div>でラップし、.justify-content-betweenを使用するとします。

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
4
J Kennedy

flex-row-reverseクラスを使う

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>
3
mubsher

Ulにmr-autoクラスを追加するだけです

<ul class="nav navbar-nav mr-auto">

両側にメニューリストがある場合は、次のようにすることができます。

<ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">left 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">left 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">left disable</a>
            </li>
        </ul>
2
SKL

項目を右に移動するためにこのコードを使用してください。

div class="collapse navbar-collapse justify-content-end"
2
Maijied Hasan Shuvo

BS v4.0.0-beta.2の実用的な例：

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
0
belgoros

Angular 4（v.4.0.0）およびng-bootstrap（Bootstrap 4）を実行しています。このコードはすべて関連性があるわけではありませんが、人々がうまくいくものを選んで選択できることを望んでいます。私のアイテムを正当化し、適切に折りたたみ、そして（OAuthを使用して）私のグーグルのプロフィール写真からドロップダウンを実装するための解決策を見つけるのに私は時がかかった。 

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>
0
GrettyGoose

Bootstrap 4ベータ版の場合、右側に要素が配置されたサンプルナビゲーションバーは次のとおりです。

<div id="app" class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>
0
Kaczor

ブートストラップフレックスボックスを使用すると、ナビゲーション要素の配置や配置を制御するのに役立ちます。

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

他の配置に含まれる場合があります 

fixed- top
    fixed bottom
    sticky-top
0
maro

上記のすべてが失敗した場合は、CSSのnavbarクラスに100％の幅を追加しました。それまでは、4.1を使ったこのプロジェクトではmr autoが私のために働いていませんでした。

0
Dominic Davies