İçinde Bootstrap , sağ merkezde sol menü öğeleri Logo A var gezinti çubuğu, ve Logo B oluşturmak için en platformu dostu yolu nedir?

Şimdiye kadar denediğim şey, Logo A'nın solda, soldaki logonun yanındaki menü öğeleri ve sağdaki Logo B'nin hizalanması için hizalandı.

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

2019 Güncellemesi

Bootstrap 4

Bootstrap 4'te flexbox olduğu için Navbar hizalaması çok daha kolay. İşte için güncellenmiş örnekler bıraktı , sağa ve merkeze Bootstrap 4 Navbar'da ve diğer birçok hizalama senaryoları burada gösterdi .

FlexBox , otomatik kenar ve sipariş yardımcı sınıfları gerektiği gibi Navbar'ın hizalamak için kullanılabilir. Hem büyük ekranlarda hem de mobil / daraltılmış görünümlerde Navbar öğelerinin (marka, bağlantılar, toggler) sırası ve hizalaması dahil olmak üzere dikkate alınması gereken birçok şey vardır. Gezinme Çubuğu için ızgara sınıflarını (satır, sütun) kullanmayın .

İşte çeşitli örnekler ...

Sol, orta (marka) ve sağ bağlantılar:

<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

Merkez bağlantıları ve yer paylaşımlı logo resmi bulunan başka bir BS4 Navbar seçeneği :

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

Veya bu diğer Bootstrap 4 hizalama senaryoları:

marka sol, ölü merkez bağlantılar, (boş sağ)

marka ve bağlantı merkezi, simgeler sol ve sağ

Diğer Bootstrap 4 örnekleri :

toggler mobil cihazda sola, marka sağ
merkez markası ve mobil
cihazdaki bağlantılar sağ masaüstündeki bağlantıları hizala, mobil
sol bağlantılardaki merkez bağlantılar ve toggler, merkez marka, sağa arama

Ayrıca bkz: Bootstrap 4 gezinme çubuğu öğelerini
sağa hizalama Bootstrap 4 gezinme çubuğu mobilde daraltılmayan düğmeyle sağa hizalama Bootstrap 4 Gezinme Çubuğu'ndaki
bir öğeyi ortalayın

Önyükleme 3

Seçenek 1 - Marka merkezi, sol / sağ gezinti bağlantıları:

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

Seçenek 2 - Sol, orta ve sağ gezinme bağlantıları:

<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

Seçenek 3 - Hem markayı hem de bağlantıları ortalayın

.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

Daha fazla örnek:

Sol marka, merkez bağlantılar
Sol anahtar, merkez marka

3.x için ayrıca bkz. Nav-justified: Bootstrap merkezi gezinme çubuğu

Bootstrap'te Navbar'ı Ortala
Bootstrap 4 navbar öğelerini sağa hizala

Bootstrap 4

NavBars Öğelerini hizalamanın birçok yolu var.

Sola Hizala için

class = "navbar-nav mr-auto "

Doğru Hizalama için

class = "navbar-nav ml-auto "

Ortaya Hizala için

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>

Benzer bir şeye ihtiyacım vardı (sol, orta ve sağa hizalanmış öğeler), ancak ortalanmış öğeleri etkin olarak işaretleme yeteneğine sahiptim. Benim için işe yarayan şuydu:

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

Bootstrap 4 (alfa 6'dan itibaren)

Navbar'lar flexbox ile üretilmiştir! Şamandıralar yerine, flexbox ve margin yardımcı programlarına ihtiyacınız olacak.

Hizala justify-content-endiçincollapse :

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

Tam örnek burada: https://jsbin.com/kemawa/edit?output

Başımı şapırtı, sadece cevabımı tekrar okudum ve OP'nin sağ tarafta bir orta menü ile değil, sol tarafta iki logonun bir tane istediğini fark etti.

Bu, HTML'de Bootstrap'ın logolar için "navbar-right" ve "navbar-left" ve ardından UL'niz için "navbar-nav" yerine "nav-justified" kullanılarak sağlanabilir. Ek CSS gerekmez (navbar-collapse geçişini xs viewport'un ortasına koymak istemiyorsanız, biraz geçersiz kılmanız gerekir, ancak bunu size bırakacaksınız).

<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

Buraya "markayı" merkezlemeye çalışanlar için eski cevabım:

Bu konu biraz eski olduğunu biliyorum, ama sadece bu konuda çalışırken bulgularımı göndermek için. Tomaszbak'ın kollaspe kopmasından bu yana çözümümü skelly'nin cevabına dayandırmaya karar verdim. İlk önce "navbar-center" ı oluşturdum ve CSS'imdeki normal navbar için şamandırayı kapattım:

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

.navbar-brand{
   float:none;
}

Bununla birlikte, skelly'nin cevabı ile ilgili sorun, gerçekten uzun bir marka adınız varsa (veya markanız için bir resim kullanmak istiyorsanız), sm viewport'a ulaştığınızda, mutlak konum ve yorumcular nedeniyle örtüşen olabilir dedi, bir kez xs viewport olsun (Z konumlandırma kullanmak ama gerçekten bu konuda endişe etmek istemiyordu sürece geçiş anahtarı kırılır).

Yani yaptığım şey , marka bloğunun birden fazla sürümünü oluşturmak için bootstrap duyarlı yardımcı programlardan yararlanmaktı:

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

Şimdi lg ve md görüntü portları markanın sol ve sağ bağlantılarla merkezlendi, sm viewport'a ulaştığınızda, bağlantılarınız bir sonraki satıra düşüyor, böylece markanızla örtüşmüyorsunuz ve nihayet xs'de collaspe başladığında geçiş yapın ve geçiş yapın. Bunu bir adım daha ileri taşıyabilir ve navbar markasıyla birlikte kullanıldığında navbar-right ve navbar-left için medya sorgularını değiştirebilir, böylece sm viewport'ta bağlantıların hepsi ortalanır, ancak bunları incelemek için zaman yoktu.

Eski önyüklememi buradan kontrol edebilirsiniz: www.bootply.com/n3PXXropP3

Sanırım 3 markaya sahip olmak "z" kadar zor olabilir, ancak duyarlı tasarım dünyasında bu çözüm tarzımla daha iyi uyuyor gibi hissediyorum.

Sol, orta ve sağ öğelerinizin içeriğine bağlı olarak aşağıdakilerin daha iyi bir çözüm olduğunu buldum. Kenar boşluğu olmadan% 100 genişlik, div'ların çakışmasına neden oldu ve çapa etiketlerinin düzgün çalışmasını engelledi - yani z-dizinlerinin dağınık kullanımı olmadan.

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

Bu tarihli bir soru ama ben bootstrap github sayfasından paylaşmak için alternatif bir çözüm buldum. Dokümantasyon güncellenmedi ve SO hakkında biraz farklı sorular olsa da aynı çözümü soran başka sorular var. Bu çözüm sizin durumunuza özgü değildir, ancak görebileceğiniz gibi, çözüm <div class="container">hemen sonradır, <nav class="navbar navbar-default navbar-fixed-top">ancak <div class="container-fluid"gerektiğinde de değiştirilebilir .

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

Çözüm bu sayfada bir keman üzerinde bulundu: https://github.com/twbs/bootstrap/issues/18362

ve V3'te düzeltilmeyecek şekilde listelenir.

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

Ortalamak istediğiniz alanları yukarıdaki bölüme göre sağa veya sola yerleştirin.

Sağa taşımak istediğiniz bölümde sol kenar boşluğunu auto -> ml-auto olarak ayarlayabilirsiniz.

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

En basit çözüm:

Yalnızca navbarsütunlara bölün : örneğin, 24 sütun varsa, 12'si boş olacak ve 12'si gezinme çubuğuna karşı koyacaktır:

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