ブートストラップ4は、navbarアイテムを右に揃えます


340

ナビゲーションバーのアイテムを右に揃えるにはどうすればよいですか?

ログインして右に登録したいのですが。しかし、私が試みたすべてが機能していないようです。

Navbarの画像

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

  • <div>周辺の<ul>属性:style="float: right"
  • <div>周辺の<ul>属性:style="text-align: right"
  • <li>タグでこれら2つのことを試しました
  • !important最後に追加してそれらすべてをもう一度試しました
  • に変更さnav-itemnav-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>

ナビゲーションバーは、alpha 6バージョンのflexboxで構築されています。
最大

1
はい、それで私はそれを右に揃えるために何をしなければなりませんか?私はすでにいくつかのフレックスボックスのことを運なしで試しました。:/
Luuk Wuijster 2017年

回答:


526

Bootstrap 4にナビゲーションバーの項目を調整するさまざまな方法がありますfloat-rightnavbarがになったため、機能しませんflexbox

1日目(左)のmr-auto自動右マージンに使用できます。 または2番目(右)に使用することもできます。navbar-navml-autonavbar-navnavbar-nav

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <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="#">Pricing</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>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

flexbox utilsもあります。この場合、2 navbar-nav秒あるのでjustify-content-between、2つの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のナビゲーションバーの右側を更新


別の頻繁なBootstrap 4ナビゲーションバーの右揃えのシナリオには、常にすべての幅で表示されるように、モバイルの折りたたみナビゲーションの外側にある右側のボタンが含まれています。

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

ここに画像の説明を入力してください

ここに画像の説明を入力してください


関連:左、中央、または右に配置されたアイテムを持つブートストラップNavBar


1
mr-auto右端のアイテムがの場合は機能しませんdropdown。ドロップダウンアイテムがページの右端に表示されます。
Ege Ersoz、2017年

6
それは機能します:codeply.com/go/P0G393rzfm-問題は、mr-auto機能する正しい位置合わせに関する問題ではないためです。ドロップダウンとの懸念を持っている場合は、新しい質問を投稿していますが、ほとんどの場合、この問題に言及している:stackoverflow.com/questions/43867258/...
Zimを

2
.dropdown-menu-rightナビゲーションバーの右揃えのドロップダウンに追加することもできます。そうしないと、特定の幅でドロップダウンが途切れることがあります。
rybo111

@ZimSystem回答ありがとうございます。私はここであなたの答えをフォローしています。stackoverflow.com/ questions / 19733447 / … 。1つのアイテムを左側に配置し、1つのアイテムを右側に配置するにはどうすればよいですか?
Lokesh Pandey

ではcodeply.com/go/P0G393rzfm、あなたは左と右のULで1 ulのを示しました。これは、最初のものにmr-autoを追加することで実現されました。しかし、ulが1つしかない場合はどうなりますか?別のulを右揃えにするためだけに空のulを作成したくありません。
Santosh Kumar

140

私の場合、ナビゲーションボタン/オプションのセットが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>

したがって、justify-content-enddivに追加mr-autoしてリストから除外します。

これが実際の例です。


3
@numediaweb OPの例では、ナビゲーション内で2つの要素を使用して、1つを左と1つ右に揃えています。1つだけ使用し、それを右に揃えました。それは正しい答えではありませんが、質問のわずかなバリエーションに対する答えとして役立ちます;)
Craig van Tonder 2017年

これは単一のnavbar-navで機能しますが、このmr-autoメソッドBootstrap docsで使用されます。
Zim

mr-autoドキュメントで使用されますが、アイテムを左揃えにするためではありません。この回答は、この記事で言及されているように、意味的に正しいです。blog.getbootstrap.com
2017/01/06

問題は、リンクの2つのリストまたは1を揃えようとしていることです。1つだけの場合、あなたの答えは機能し、私にとって非常に役に立ちました。ありがとう!
裸足

それは私のために働いたが、私はこの答えの上のものがうまくいかない理由を知りません。
Suhail Akhtar 2018

59

BS4でこの問題を解決できない場合は、以下のコードを試してください-

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

7
いいえ-すべてを右に揃えます。質問は、彼は単一のアイテムを右に揃えたいだけだと言っています。
NickG 2018

2
m*-autoクラスを配置した場所に応じてコンテンツを左または右にプッシュするかどうかについて公式ドキュメントを確認してください
ピエールドレスピーナ

@PierredeLESPINAY、はい、ml-autoコンテンツを右端の位置にプッシュしますが、なぜmr-0仕事ができないのか疑問に思いましたか?
アボカド

42

ブートストラップ4

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

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

32

オン Bootsrap 4.0.0-beta.2、ここに記載されている回答がどれもうまくいきませんでした。最後に、Bootstrapサイトは、ドキュメントではなくページのソースコードを介して解決策を提供してくれました...

Getbootstrap.com navbar-navは、次のクラスの助けを借りて、権利を右に揃えますml-md-auto


1
私のために美しく働いた。他には何もしませんでした。
マリアキャンベル


9

このコードを使用して、アイテムを右に移動します。

<div class="collapse navbar-collapse justify-content-end">

1
折りたたまれたメニューがある場合は機能しませんが、ml-autoを使用すると機能します。メニューが折りたたまれている場合、<li>アイテムは幅の100%を占めるため、マージンは適用されません。
ライアンS

8

の直後に左側にホーム、機能、価格を設定しnav-brand、右側にログインして登録したい場合は、2つのリストをラップし<div>て使用します.justify-content-between

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

7

mr-autoクラスを追加するだけulです:

<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>

5

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>

2

それはブーストラップ4の小さな変更です。ナビゲーションバーを右側に揃えるには、2つの変更のみを行う必要があります。彼らです:

  1. navbar-navクラスの追加w-100としてnavbar-nav w-100100として幅を作るために
  2. nav-item dropdownクラスのアドオンml-autoとしてnav-item dropdown ml-autoマージンをautoに左にします。

わからない方は、添付の画像を参考にしてください。

CodePenリンク

ここに画像の説明を入力してください

完全なソースコード

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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 w-100">
      <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="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>

2

ブートストラップ4.3.1の場合、私はnav-pillsを使用しており、これ以外には何も機能しませんでした。

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>


0

Angular 4(v.4.0.0)とng-bootstrap(Bootstrap 4)を実行しています。このコードはすべて関連性があるわけではありませんが、人々が機能するものを選んで選択できることを望んでいます。アイテムを正しく正当化し、適切に折りたたみ、Google(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

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

ブートストラップフレックスボックスを使用すると、ナビゲーション要素の配置と配置を制御できます。上記の問題のために、mr-autoを追加することがより良い解決策です。

<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

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

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


-1

verndor-prefixes.lessで69行目を見つけて、次のように記述します。

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}


-2

これを、リリースされたバージョン4のgetbootstrapページの1つからコピーしました。

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 

-3

スタックオーバーフローは初めてで、フロントエンド開発は初めてです。これは私のために働いたものです。そのため、リストアイテムを表示したくありませんでした。

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }
<nav class="navbar navbar-toggleable-md navbar-light 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="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.