Bootstrap 4 sejajarkan item navbar ke kanan

342

Bagaimana cara menyelaraskan item navbar ke kanan?

Saya ingin memiliki login dan mendaftar di sebelah kanan. Tapi semua yang saya coba sepertinya tidak berhasil.

Inilah yang saya coba sejauh ini:

<div>sekitar <ul>dengan atribut:style="float: right"
<div>sekitar <ul>dengan atribut:style="text-align: right"
mencoba kedua hal itu pada <li>tag
mencoba semua hal itu lagi dengan !importantmenambahkan sampai akhir
diubah nav-itemmenjadi nav-rightdi<li>
menambahkan pull-sm-rightkelas ke<li>
menambahkan align-content-endkelas ke<li>

Ini kode saya:

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

— Luuk Wuijster
sumber

Navbar dibuat dengan flexbox dari versi alpha 6.

— Maks

1

Ya, jadi apa yang harus saya lakukan untuk mendapatkannya agar sejajar dengan yang benar. Saya sudah mencoba beberapa hal flexbox tanpa hasil. : /

— Luuk Wuijster

531

Bootstrap 4 memiliki banyak cara berbeda untuk menyelaraskan item navbar . float-righttidak akan berfungsi karena navbar sekarang flexbox.

Anda dapat menggunakan mr-automargin kanan otomatis pada tanggal 1 (kiri) navbar-nav. Atau , ml-autodapat digunakan pada tanggal 2 (kanan) navbar-nav, atau jika Anda hanya memiliki satu navbar-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

Ada juga utilitas flexbox. Dalam hal ini, Anda memiliki 2 navbar-navs, sehingga justify-content-betweendi navbar-collapseakan bekerja bahkan ruang antara mereka,

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

Pembaruan untuk Bootstrap 4.0 dan yang lebih baru

Pada Bootstrap 4 beta, ml-automasih akan berfungsi untuk mendorong item ke kanan. Sadarilah bahwa navbar-toggleable-kelas telah berubahnavbar-expand-*

Hak navbar yang diperbarui untuk Bootstrap 4

Skenario penyelarasan kanan Bootstrap 4 Navbar yang sering lainnya mencakup tombol di sebelah kanan yang tetap berada di luar mobile collapse nav sehingga selalu ditampilkan pada semua lebar.

Tombol rata kanan yang selalu terlihat

Terkait: Bootstrap NavBar dengan item sejajar kiri, tengah atau kanan

— Zim
sumber

1

mr-autotidak berfungsi jika item yang paling kanan adalah a dropdown. Item dropdown tumpah di tepi kanan halaman.

— Ege Ersoz

6

Ini berfungsi: codeply.com/go/P0G393rzfm - masalahnya bukan mr-autokarena pertanyaannya adalah tentang menyelaraskan hak mana yang berfungsi. Posting pertanyaan baru jika Anda memiliki kekhawatiran dengan dropdown, tetapi kemungkinan besar Anda merujuk masalah ini: stackoverflow.com/questions/43867258/…

— Zim

2

Anda juga dapat menambahkan .dropdown-menu-rightke dropdown rata-rata di navbar. Tidak melakukan hal itu dapat memotong dropdown pada lebar tertentu.

— rybo111

@ZimSystem terima kasih atas jawaban Anda. Saya telah mengikuti jawaban Anda di sini stackoverflow.com/questions/19733447/… . Saya punya pertanyaan bagaimana saya bisa mencapai satu item di sisi kiri dan satu item di sisi kanan?

— Lokesh Pandey

Di codeply.com/go/P0G393rzfm , Anda telah menunjukkan satu ul di kiri dan satu ul di kanan. Itu dicapai dengan menambahkan mr-auto ke yang pertama. Tetapi bagaimana jika saya hanya memiliki satu ul? Saya tidak ingin membuat ul kosong hanya untuk menyelaraskan yang lain ke kanan.

— Santosh Kumar

140

Dalam kasus saya, saya ingin hanya satu set tombol navigasi / opsi dan menemukan bahwa ini akan berfungsi:

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

Jadi, Anda akan menambah justify-content-enddiv dan menghilangkan mr-autopada daftar.

Berikut ini contoh kerjanya .

— Craig van Tonder
sumber

3

@numediaweb Dalam contoh OPs, ia menggunakan dua elemen dalam nav, menyelaraskan satu kiri dan satu kanan; di mana saya hanya menggunakan satu dan menyelaraskannya ke kanan. Ini bukan jawaban yang tepat tetapi membantu sebagai jawaban untuk sedikit variasi dari pertanyaan;)

— Craig van Tonder

Ini berfungsi untuk navbar-nav tunggal, tetapi mr-autometode ini digunakan dalam dokumentasi Bootstrap .

— Zim

mr-autodigunakan dalam dokumen, tetapi tidak untuk menyelaraskan item ke kiri. Jawaban ini benar secara semantik sebagaimana disebutkan dalam artikel ini: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

— qwaz

Pertanyaannya adalah apakah Anda mencoba menyelaraskan 2 daftar tautan atau 1. Jika hanya 1, jawaban Anda berhasil dan sangat membantu saya. Terima kasih!

— barefootsanders

Ini berhasil untuk saya, tetapi saya tidak tahu mengapa jawaban di atas tidak bekerja.

— Suhail Akhtar

59

Bagi mereka yang masih berjuang dengan masalah ini di BS4 cukup coba kode di bawah ini -

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

— Muhammad Tarique
sumber

7

Tidak - yang menyelaraskan semuanya ke kanan. Pertanyaannya mengatakan dia hanya ingin menyelaraskan satu item ke kanan.

— NickG

2

Periksa dokumen resmi tentang m*-autokonten yang didorong ke kiri atau ke kanan tergantung di mana Anda meletakkan kelas

— Pierre de LESPINAY

@PierredeLESPINAY, ya ml-automemang mendorong konten ke posisi paling kanan, tapi saya hanya bertanya-tanya mengapa mr-0tidak bisa melakukan pekerjaan?

— alpukat

42

Pada Bootstrap 4

Jika Anda ingin menyelaraskan merek ke kiri dan semua item navbar ke kanan, ubah default mr-automenjadiml-auto

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

— geet Sebastian
sumber

32

Pada Bootsrap 4.0.0-beta.2, tidak ada jawaban yang tercantum di sini yang berfungsi untuk saya. Akhirnya, situs Bootstrap memberi saya solusi, bukan melalui dokumennya tetapi melalui kode sumber halamannya ...

Getbootstrap.com menyelaraskan hak mereka navbar-navke kanan dengan bantuan kelas berikut: ml-md-auto.

— ClemC
sumber

1

Bekerja dengan baik untuk saya. Tidak ada yang lain.

— Maria Campbell

14

Gunakan ml-autoalih-alih mr-autosetelah menerapkan navjustify-content-end keul

— James Pike
sumber

9

Gunakan kode ini untuk memindahkan item ke kanan.

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

— Maijied Hasan Shuvo
sumber

1

itu tidak akan berfungsi ketika Anda memiliki Menu yang diciutkan, namun, dengan ml-otomatis itu akan tetap berfungsi karena ketika menu diciutkan, item <li> masih mengambil 100% dari lebar sehingga tidak ada margin yang akan diterapkan.

— Ryan S

8

Jika Anda ingin Rumah, Fitur dan Harga di sebelah kiri segera setelah Anda nav-brand, dan kemudian masuk dan mendaftar di sebelah kanan kemudian bungkus dua daftar <div>dan gunakan .justify-content-between:

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

— J Kennedy
sumber

7

Cukup tambahkan mr-autokelas di ul:

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

Jika Anda memiliki daftar menu di kedua sisi, Anda dapat melakukan sesuatu seperti ini:

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

— SKL
sumber

5

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

— mubsher
sumber

2

Ini sedikit perubahan dalam boostrap 4. Untuk menyelaraskan navbar ke sisi kanan, Anda hanya perlu membuat dua perubahan. mereka:

di navbar-navkelas tambahkan w-100sebagainavbar-nav w-100 untuk membuat lebar sebagai 100
di nav-item dropdownadd kelas ml-autosebagai nav-item dropdown ml-autountuk membuat marjin kiri sebagai auto.

Jika Anda tidak mengerti, silakan merujuk gambar yang saya lampirkan ini.

Tautan CodePen

Kode sumber lengkap

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

— Anand Raja
sumber

2

Untuk bootstrap 4.3.1, saya menggunakan nav-pills dan tidak ada yang berhasil untuk saya kecuali ini:

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

— Ajay Kumar
sumber

2

Di bootstrap v4.3 cukup tambahkan ml-autodi <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

— Mohit Prajapati
sumber

0

Saya menjalankan Angular 4 (v.4.0.0) dan ng-bootstrap (Bootstrap 4). Semua kode ini tidak akan relevan tetapi berharap orang dapat memilih dan memilih yang berfungsi. Saya butuh beberapa saat untuk menemukan solusi untuk mendapatkan barang saya untuk dibenarkan, runtuh dengan benar dan untuk menerapkan dropdown dari gambar profil google saya (menggunakan 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>

— GrettyGoose
sumber

0

Untuk Bootstrap 4 beta, sampel navbar dengan elemen yang disejajarkan dengan sisi kanan adalah:

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

— Kaczor
sumber

0

Menggunakan kotak fleksibel bootstrap membantu kami mengontrol penempatan dan penyelarasan elemen navigasi Anda. untuk masalah di atas menambahkan mr-auto adalah solusi yang lebih baik.

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

penempatan lain mungkin termasuk

fixed- top
    fixed bottom
    sticky-top

— maro
sumber

0

Contoh kerja untuk 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>

— belgoros
sumber

0

Jika semua di atas gagal, saya menambahkan lebar 100% ke kelas navbar di CSS. Sampai saat itu mr otomatis tidak bekerja untuk saya pada proyek ini menggunakan 4.1.

— Dominic Davies
sumber

-1

Temukan baris 69 di verndor-prefixes.less dan tulis sebagai berikut:

.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);
}

Luaskan cuplikan

— Paul
sumber

-2

Hanya menyalin ini dari salah satu halaman getbootstrap untuk versi yang dirilis 4 yang bekerja jauh lebih baik daripada yang di atas

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

— Gary Molton
sumber

-3

Saya baru untuk stack overflow dan baru untuk pengembangan front end. Inilah yang bekerja untuk saya. Jadi saya tidak ingin item daftar ditampilkan.

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

— MSangha
sumber