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
!important
menambahkan sampai akhir - diubah
nav-item
menjadinav-right
di<li>
- menambahkan
pull-sm-right
kelas ke<li>
- menambahkan
align-content-end
kelas 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>
css
twitter-bootstrap
flexbox
bootstrap-4
navbar
Luuk Wuijster
sumber
sumber
Jawaban:
Bootstrap 4 memiliki banyak cara berbeda untuk menyelaraskan item navbar .
float-right
tidak akan berfungsi karena navbar sekarangflexbox
.Anda dapat menggunakan
mr-auto
margin kanan otomatis pada tanggal 1 (kiri)navbar-nav
. Atau ,ml-auto
dapat digunakan pada tanggal 2 (kanan)navbar-nav
, atau jika Anda hanya memiliki satunavbar-nav
.https://codeply.com/go/P0G393rzfm
Ada juga utilitas flexbox. Dalam hal ini, Anda memiliki 2
navbar-nav
s, sehinggajustify-content-between
dinavbar-collapse
akan bekerja bahkan ruang antara mereka,Pembaruan untuk Bootstrap 4.0 dan yang lebih baru
Pada Bootstrap 4 beta,
ml-auto
masih akan berfungsi untuk mendorong item ke kanan. Sadarilah bahwanavbar-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
sumber
mr-auto
tidak berfungsi jika item yang paling kanan adalah adropdown
. Item dropdown tumpah di tepi kanan halaman.mr-auto
karena 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/….dropdown-menu-right
ke dropdown rata-rata di navbar. Tidak melakukan hal itu dapat memotong dropdown pada lebar tertentu.Dalam kasus saya, saya ingin hanya satu set tombol navigasi / opsi dan menemukan bahwa ini akan berfungsi:
Jadi, Anda akan menambah
justify-content-end
div dan menghilangkanmr-auto
pada daftar.Berikut ini contoh kerjanya .
sumber
mr-auto
metode ini digunakan dalam dokumentasi Bootstrap .mr-auto
digunakan 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-6Bagi mereka yang masih berjuang dengan masalah ini di BS4 cukup coba kode di bawah ini -
sumber
m*-auto
konten yang didorong ke kiri atau ke kanan tergantung di mana Anda meletakkan kelasml-auto
memang mendorong konten ke posisi paling kanan, tapi saya hanya bertanya-tanya mengapamr-0
tidak bisa melakukan pekerjaan?Pada Bootstrap 4
Jika Anda ingin menyelaraskan merek ke kiri dan semua item navbar ke kanan, ubah default
mr-auto
menjadiml-auto
sumber
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-nav
ke kanan dengan bantuan kelas berikut:ml-md-auto
.sumber
Gunakan
ml-auto
alih-alihmr-auto
setelah menerapkannav
justify-content-end keul
sumber
Gunakan kode ini untuk memindahkan item ke kanan.
sumber
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
:sumber
Cukup tambahkan
mr-auto
kelas diul
:Jika Anda memiliki daftar menu di kedua sisi, Anda dapat melakukan sesuatu seperti ini:
sumber
gunakan kelas flex-row-reverse
sumber
Ini sedikit perubahan dalam boostrap 4. Untuk menyelaraskan navbar ke sisi kanan, Anda hanya perlu membuat dua perubahan. mereka:
navbar-nav
kelas tambahkanw-100
sebagainavbar-nav w-100
untuk membuat lebar sebagai 100nav-item dropdown
add kelasml-auto
sebagainav-item dropdown ml-auto
untuk membuat marjin kiri sebagai auto.Jika Anda tidak mengerti, silakan merujuk gambar yang saya lampirkan ini.
Tautan CodePen
Kode sumber lengkap
sumber
Untuk bootstrap 4.3.1, saya menggunakan nav-pills dan tidak ada yang berhasil untuk saya kecuali ini:
sumber
Di bootstrap v4.3 cukup tambahkan
ml-auto
di<ul class="navbar-nav">
Ex:<ul class="navbar-nav ml-auto">
sumber
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).
sumber
Untuk Bootstrap 4 beta, sampel navbar dengan elemen yang disejajarkan dengan sisi kanan adalah:
sumber
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.
penempatan lain mungkin termasuk
sumber
Contoh kerja untuk BS
v4.0.0-beta.2
:sumber
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.
sumber
Temukan baris 69 di verndor-prefixes.less dan tulis sebagai berikut:
sumber
Hanya menyalin ini dari salah satu halaman getbootstrap untuk versi yang dirilis 4 yang bekerja jauh lebih baik daripada yang di atas
sumber
Saya baru untuk stack overflow dan baru untuk pengembangan front end. Inilah yang bekerja untuk saya. Jadi saya tidak ingin item daftar ditampilkan.
sumber