437

Di Bootstrap , apa cara paling ramah platform untuk membuat bilah navigasi yang memiliki Logo A di sebelah kiri, item menu di tengah, dan Logo B di sebelah kanan?

Inilah yang saya coba sejauh ini, dan akhirnya disejajarkan sehingga Logo A ada di sebelah kiri, item menu di sebelah logo di sebelah kiri dan Logo B di sebelah kanan.

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

html css twitter-bootstrap bootstrap-4 navbar Aliv
sumber

803

Pembaruan 2019

Bootstrap 4

Sekarang Bootstrap 4 memiliki flexbox, penyelarasan Navbar jauh lebih mudah. Berikut adalah contoh yang diperbarui untuk kiri , kanan dan tengah di Bootstrap 4 Navbar , dan banyak skenario penyelarasan lain yang ditunjukkan di sini .

Kelas utilitas flexbox , margin otomatis , dan pemesanan dapat digunakan untuk menyelaraskan konten Navbar sesuai kebutuhan. Ada banyak hal yang perlu dipertimbangkan termasuk urutan dan penyelarasan item Navbar (merek, tautan, toggler) pada layar besar dan tampilan seluler / runtuh. Jangan gunakan kelas kisi (baris, kolom) untuk Navbar .

Berikut adalah berbagai contoh ...

Tautan kiri, tengah (merek) dan kanan:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

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

Opsi BS4 Navbar lain dengan tautan tengah dan gambar logo overlay :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Atau , skenario penyelarasan Bootstrap 4 lainnya ini:

kiri merek, tautan mati di tengah, (kanan kosong)

pusat merek dan tautan, ikon kiri dan kanan

Lebih banyak Bootstrap 4 contoh :

toggler kiri pada seluler, merek
tengah kanan merek dan tautan pada tautan
lurus kanan seluler di desktop, tautan tengah pada tautan kiri seluler
& toggler, merek tengah, cari kanan

Lihat juga: Bootstrap 4 sejajarkan item navbar ke kanan.
Bootstrap 4 navbar kanan sejajar dengan tombol yang tidak runtuh di seluler.
Pusatkan elemen di Bootstrap 4 Navbar

Bootstrap 3

Opsi 1 - Pusat Merek, dengan tautan nav kiri / kanan:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)

Opsi 2 - Tautan kiri, tengah dan kanan:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://www.bootply.com/SGYC6BWeBK

Opsi 3 - Pusatkan merek dan tautan

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

Lebih banyak contoh:

Merek kiri, tautan tengah
toggler kiri, merek tengah

Untuk 3.x juga lihat nav-justified: Bootstrap center navbar

Pusat Navbar di Bootstrap
Bootstrap 4 sejajarkan item navbar ke kanan

Zim
sumber

1

bagaimana Anda dapat membuat item kiri runtuh di sakelar lain di sebelah kiri?

gepex

1

Saya membuat 2 contoh jsfiddle, karena bootply tidak berfungsi saat ini. sol 1 dan sol 2 . btw, soluzion 2 berfungsi lebih baik (imho)

GiuServ

Untuk Bootstrap 4, menggunakan Firefox, contoh # 1 tidak berfungsi. Menambahkan .abskelas menyebabkan navbar-brandelemen menutupi tombol di sebelah kiri dan kanan, membuatnya tidak dapat diklik

8bithero

1

Bagaimana ini tidak ditandai sebagai jawaban? Memberikan 3 opsi untuk BS 3 & 4, terima kasih pak.

Murkantilism

Tidak ada tautan codeply Anda yang dibuka dan itu karena desain mengerikan yang digunakan di situs web itu. Mereka menggabungkan semua jenis iklan, graphQL ... bersama-sama dan jika salah satu gagal untuk memuat atau memblokir, seluruh layar akan kosong. ya begitulah cara kerja sudut (atau TIDAK bekerja).

AaA

59

Bootstrap 4

Kami memiliki banyak cara untuk menyelaraskan Item navBars.

Untuk Left Align

class = "navbar-nav mr-auto "

Untuk Right Align

class = "navbar-nav ml-auto "

Untuk Center Align

class = "navbar-nav mx-auto "

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

Jerold Joel
sumber

1

menambahkan class = "navbar-brand mx-auto" di tag b-nav-item membantu saya

Sheece Gardazi

36

Saya membutuhkan sesuatu yang serupa (kiri, tengah dan kanan disejajarkan item), tetapi dengan kemampuan untuk menandai item terpusat sebagai aktif. Apa yang berhasil untuk saya adalah:

http://www.bootply.com/CSI2KcCoEM

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

CSS:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

tomaszbak
sumber

1

Itu cukup dekat, tetapi rusak ketika Anda runtuh. Jika Anda melihatnya di perangkat seluler, "Merek" muncul di bawah bilah menu. Apakah Merek bukan bagian dari Nav yang sebenarnya?

spasticninja

1

Ini menjawab OP lebih dekat.

Roger Dueck

Sejauh ini ini berhasil bagi saya. Saya tidak memiliki Merek atau elemen selaras kanan, hanya 3 opsi terpusat. Terima kasih

Alessandro

Saya pikir solusi ini melakukan pekerjaan yang lebih baik daripada jawaban yang paling banyak dipilih karena pada pengurangan ukuran layar tidak ada elemen yang nongkrong di navbar (minimal dalam kode contoh bersama)

pravin

26

Bootstrap 4 (pada alpha 6)

Navbar dibuat dengan flexbox! Alih-alih mengapung, Anda akan memerlukan utilitas flexbox dan margin.

Untuk Align Right gunakan justify-content-endpada collapsediv:

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

Contoh lengkap di sini: https://jsbin.com/kemawa/edit?output

Jeremy Lynch
sumber

3

Tidak berfungsi untuk saya ... justify-content-end tampaknya berlaku untuk nav dan tampaknya tidak berfungsi untuk navbar adalah versi terbaru dari bootstrap.

Stephane Paquet

1

@stephanePaquet, ini berlaku untuk alpha 6 (rilis bootstrap terbaru) - apa yang Anda gunakan?

Jeremy Lynch

11

Pukul kepalaku, baca ulang jawabanku dan sadari OP meminta dua logo di sebelah kiri di sebelah kanan dengan menu tengah, bukan sebaliknya.

Ini dapat dilakukan secara ketat dalam HTML dengan menggunakan Bootstrap "navbar-right" dan "navbar-left" untuk logo dan kemudian "nav-justified" alih-alih "navbar-nav" untuk UL Anda. Tidak diperlukan tambahan CSS (kecuali jika Anda ingin menempatkan navbar-collapse toggle di tengah dalam xs viewport, maka Anda perlu menimpa sedikit, tetapi akan menyerahkannya kepada Anda).

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

Bootply: http://www.bootply.com/W6uB8YfKxm

Bagi mereka yang tiba di sini mencoba memusatkan "merek" di sini adalah jawaban lama saya:

Saya tahu utas ini agak lama, tetapi hanya untuk memposting temuan saya saat mengerjakan ini. Saya memutuskan untuk mendasarkan solusi saya pada jawaban skelly sejak istirahat tomaszbak pada collaspe. Pertama saya membuat "navbar-center" saya dan mematikan float untuk navbar normal di CSS saya:

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

Namun masalah dengan jawaban skelly adalah jika Anda memiliki nama merek yang sangat panjang (atau Anda ingin menggunakan gambar untuk merek Anda) maka setelah Anda masuk ke sm viewport mungkin ada tumpang tindih karena posisi absolut dan karena komentator memiliki kata, begitu Anda sampai ke viewport xs sakelar sakelar putus (kecuali jika Anda menggunakan penentuan posisi Z tetapi saya benar-benar tidak ingin harus khawatir tentang hal itu).

Jadi yang saya lakukan adalah memanfaatkan utilitas responsif bootstrap untuk membuat beberapa versi dari blok merek:

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

Jadi sekarang lg dan md viewports memiliki merek yang berpusat pada tautan ke kiri dan kanan, setelah Anda mencapai sm viewport, tautan Anda jatuh ke baris berikutnya sehingga Anda tidak tumpang tindih dengan merek Anda, dan akhirnya pada xs viewport collaspe menendang dan Anda dapat menggunakan toggle. Anda dapat mengambil langkah ini lebih jauh dan memodifikasi kueri media untuk navbar-kanan dan navbar-kiri saat digunakan dengan navbar-brand sehingga dalam viewport sm semua tautan terpusat tetapi tidak punya waktu untuk memeriksanya.

Anda dapat memeriksa bootply lama saya di sini: www.bootply.com/n3PXXropP3

Saya kira memiliki 3 merek mungkin sama merepotkan dengan "z" tapi saya merasa di dunia desain responsif solusi ini lebih cocok dengan gaya saya.

Jonofthedead
sumber

1

Saya menemukan yang berikut ini adalah solusi yang lebih baik tergantung pada konten item kiri, tengah dan kanan Anda. Lebar 100% tanpa margin menyebabkan tumpang tindih divs dan mencegah tag anchor bekerja dengan benar - tanpa penggunaan z-index yang berantakan.

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

atreeon
sumber

1

Ini adalah pertanyaan yang bertanggal tapi saya menemukan solusi alternatif untuk dibagikan langsung dari halaman bootstrap github. Dokumentasi belum diperbarui dan ada pertanyaan lain tentang SO yang meminta solusi yang sama meskipun pada pertanyaan yang sedikit berbeda. Solusi ini tidak spesifik untuk kasus Anda tetapi karena Anda dapat melihat solusinya <div class="container">tepat setelah <nav class="navbar navbar-default navbar-fixed-top">tetapi juga dapat diganti <div class="container-fluid"sesuai kebutuhan.

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

Solusinya ditemukan pada biola di halaman ini: https://github.com/twbs/bootstrap/issues/18362

dan terdaftar sebagai tidak akan diperbaiki di V3.

Shawn
sumber

1

<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

Letakkan bidang yang ingin Anda pusatkan, kanan atau kiri sesuai divisi di atas.

Nehil Koshiya
sumber

1

Anda mengatur margin kiri ke otomatis -> ml-otomatis pada bagian yang ingin Anda pindahkan ke kanan.

 <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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>

Gerard
sumber

-2

Solusi paling sederhana:

Cukup bagi navbarmenjadi kolom: misalnya, jika Anda memiliki 24 kolom di atas semua, 12 akan kosong dan 12 akan berisi navbar:

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>

parsecer
sumber

1

Baris kisi dan col tidak boleh digunakan di dalam Navbar. Gunakan konten yang didukung .

Zim

@ Zim Kenapa tidak, apa yang buruk tentang itu?

parsecer

Bootstrap NavBar dengan item sejajar kiri, tengah atau kanan

Jawaban:

Bootstrap 4

Bootstrap 3

Bootstrap 4 (pada alpha 6)