Bootstrap NavBar dengan kiri, tengah atau kanan sejajar item

Question

Lebih

Question

Bootstrap NavBar dengan kiri, tengah atau kanan sejajar item

Di Bootstrap, apa yang paling platform yang cocok bagi cara untuk membuat navigasi bar yang memiliki Logo di sebelah kiri, item menu di tengah, dan Logo B di sebelah kanan?

Berikut adalah apa yang saya'sudah mencoba sejauh ini, dan itu akhirnya menjadi selaras sehingga Logo Yang 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>

Zim

Pertanyaan edit 24 Agustus 2018 в 3:43

Pemrograman

html

css

twitter-bootstrap

bootstrap-4

navbar

Bootstrap 4

Sekarang bahwa Bootstrap 4 memiliki flexbox, Navbar keselarasan jauh lebih mudah. Berikut ini adalah updated contoh untuk kiri, kan dan pusat di Navbar Bootstrap 4, dan banyak lainnya keselarasan skenario menunjukkan di sini.

The flexbox, auto-margin, dan pemesanan kelas utilitas dapat digunakan untuk menyelaraskan Navbar konten yang diperlukan. Ada banyak hal yang perlu dipertimbangkan termasuk ketertiban dan keselarasan Navbar item (merek, link, toggler) pada kedua layar besar dan mobile/runtuh pandangan. Don't menggunakan grid kelas (row,col) untuk Navbar.

Berikut ini adalah berbagai contoh...

Kiri, center(merek) dan kanan links:

<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

Lain BS4 Navbar pilihan dengan pusat link dan overlay gambar logo:

<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, ini lain Bootstrap 4 keselarasan skenario:

merek kiri, mati link pusat, (kosong kanan)

merek dan link bisnis, ikon kiri dan kanan

Lebih Bootstrap 4 contoh:

toggler kiri pada ponsel, merek kanan
center merek dan link pada mobile
kanan menyelaraskan link pada desktop, pusat link di mobile
kiri link & toggler, pusat merek, pencarian kanan

Juga melihat: https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right
https://stackoverflow.com/questions/51852374/bootstrap-4-navbar-right-align-with-button-that-doesnt-collapse-on-mobile
https://stackoverflow.com/questions/33867603/center-an-element-in-bootstrap-4-navbar

Bootstrap 3

Pilihan 1 - Merek center, dengan kiri/kanan nav link:

<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

Pilihan 2 - Kiri, tengah dan kanan nav link:

<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

3 - Pusat kedua merek dan link

.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

Contoh:

Kiri merek, pusat link
Kiri toggler, pusat merek

3.x juga melihat nav-dibenarkan: https://stackoverflow.com/questions/21453781/bootstrap-center-navbar/21459341#21459341

https://stackoverflow.com/questions/39945599/center-navbar-in-bootstrap/42736011#42736011
https://stackoverflow.com/questions/41513463/

tomaszbak · Answer 2 · 2014-10-26T15:54:46+00:00

Aku butuh sesuatu yang mirip (kiri, tengah dan kanan sejajar item), tetapi dengan kemampuan untuk menandai berpusat item aktif. Apa yang bekerja 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;
  }
}

Jerold Joel · Answer 3 · 2019-01-21T12:50:39+00:00

Bootstrap 4

Kami memiliki banyak cara untuk menyelaraskan navBars Item.

Untuk Menyelaraskan Kiri

class = "navbar-nav mr-auto"

Untuk Menyelaraskan Tepat

class = "navbar-nav ml-auto"

Untuk Pusat Menyelaraskan

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>

Jeremy Lynch · Answer 4 · 2017-01-08T04:29:03+00:00

Bootstrap 4 (sebagai alpha 6)

Navbars dibangun dengan flexbox! Bukan mengapung, anda akan perlu flexbox dan margin utilitas.

Untuk Menyelaraskan Tepat menggunakan membenarkan-content-end pada runtuh div:

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

Lengkap contoh berikut: https://jsbin.com/kemawa/edit?output

Jonofthedead · Answer 5 · 2015-04-02T20:43:05+00:00

Memukul kepala saya, hanya membaca jawaban saya dan menyadari OP meminta dua logo's satu di kiri satu di kanan dengan menu pusat, bukan sebaliknya.

Hal ini dapat dicapai secara ketat dalam HTML dengan menggunakan Bootstrap's "navbar-kanan" dan "navbar-kiri" untuk logo dan kemudian "nav-dibenarkan" bukan "navbar-nav" untuk anda UL. Tidak ada tambahan CSS yang diperlukan (kecuali jika anda ingin menempatkan navbar-runtuhnya beralih di pusat xs viewport, maka anda perlu mengganti sedikit, tetapi akan meninggalkan itu terserah 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

Untuk orang-orang yang sampai di sini mencoba untuk pusat "merek" saya menjawab:

Aku tahu thread ini sedikit tua, tapi hanya untuk posting temuan saya ketika bekerja pada ini. Saya memutuskan untuk basis solusi saya pada skelly's jawaban sejak tomaszbak's istirahat pada collaspe. Pertama saya membuat saya "navbar-center" dan dimatikan pelampung untuk normal navbar di CSS saya:

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

.navbar-brand{
   float:none;
}

Namun masalah dengan skelly's jawaban adalah jika anda memiliki benar-benar panjang merek nama (atau anda ingin menggunakan gambar untuk merek anda) kemudian setelah anda mendapatkan ke sm viewport tidak akan tumpang tindih karena posisi absolut dan sebagai komentator mengatakan, setelah anda mendapatkan ke xs viewport toggle switch rusak (kecuali anda menggunakan Z positioning tapi aku benar-benar tidak't perlu khawatir tentang hal itu).

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

<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 dengan link ke kiri dan kanan, setelah anda mendapatkan ke sm pandang link anda drop ke baris berikutnya sehingga anda don't tumpang tindih dengan merek anda, dan kemudian akhirnya pada xs viewport collaspe tendangan dan anda dapat menggunakan tombol. Anda bisa mengambil langkah lebih jauh dan memodifikasi media queries untuk navbar-kanan dan navbar-kiri ketika digunakan dengan navbar-merek sehingga di sm pandang link yang semua berpusat tetapi didn't memiliki waktu untuk dokter hewan itu.

Anda dapat memeriksa tua saya bootply berikut: www.bootply.com/n3PXXropP3

Saya kira setelah 3 merek mungkin hanya sebanyak apapun tujuan kunjungan anda, sebagai "z" tapi aku merasa seperti dalam dunia desain responsif solusi ini cocok dengan gaya saya lebih baik.

Shawn · Answer 6 · 2016-02-09T04:12:02+00:00

Ini adalah tanggal pertanyaan tapi saya menemukan alternatif solusi untuk berbagi langsung dari bootstrap halaman github. Dokumentasi belum diperbarui dan ada pertanyaan lain pada JADI meminta solusi yang sama meskipun sedikit pertanyaan yang berbeda. Solusi ini tidak spesifik untuk kasus anda, tetapi karena anda dapat melihat solusi adalah <div class="wadah"> setelah <nav class="navbar navbar-default navbar-fixed-top"> tetapi dapat juga diganti dengan <div class="container-fluid" yang diperlukan.

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

Solusi itu di temukan pada biola pada halaman ini: https://github.com/twbs/bootstrap/issues/18362

dan terdaftar sebagai won't fix di V3.

atreeon · Answer 7 · 2014-05-29T09:24:12+00:00

Saya menemukan berikut adalah solusi yang lebih baik, tergantung pada isi dari kiri, tengah dan kanan item. Lebar 100% tanpa margin yang disebabkan tumpang tindih div dan mencegah tag anchor untuk bekerja dengan benar - yang tanpa berantakan penggunaan z-index.

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

Nehil Koshiya · Answer 8 · 2019-09-08T04:40:58+00:00

``html

halo

`` Menempatkan bidang yang ingin anda tengah, kanan atau kiri sesuai di atas divisi.

parsecer · Answer 9 · 2018-09-02T22:21:11+00:00

Solusi yang paling sederhana:

Hanya membagi navbar ke dalam kolom: misalnya, jika anda memiliki 24 kolom di atas semua, 12 akan menjadi kosong dan 12 akan kontraindikasi, yang mel 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>