İçeriği duyarlı önyükleme gezinme çubuğunda ortala

221

İçeriğimi bootstrap navbar'ında ortalamakta sorun yaşıyorum. Bootstrap 3 kullanıyorum. Birçok yazı okudum, ancak kullanılan CSS veya yöntemler kodumla çalışmayacak! Gerçekten sinirliyim, bu yüzden bu benim son seçeneğim gibi. Herhangi bir yardım mutluluk duyacağız!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css  twitter-bootstrap  navbar 
— Nick lK
kaynak

Yanıtlar:

457

Bence aradığınız şey bu. float: leftOrtaya çıkarmak için iç navdan çıkarmanız ve bir satır içi blok yapmanız gerekir.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

http://jsfiddle.net/bdd9U/2/

Düzenleme: Bu efekt yalnızca gezinme daraltılmadığında gerçekleşmesini istiyorsanız uygun ortam sorgusunda onu çevreleyin.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

http://jsfiddle.net/bdd9U/3/

— hajpoj
kaynak
Bağlantıların altında fazladan boşlukla ilgili sorunlarınız varsa (örneğin, etkin bağlantılar için farklı bir arka plan kullanıyorsanız) şunları kullanabilirsiniz:.navbar .navbar-collapse { line-height: 0px; }
— jenniwren
3
Orijinal bootstrap.css ile oynamamanızı tavsiye ederim. Bunun yerine kendi tarzınızı yaratın.
— Faizan Mubasher
Benim durumumda, "flex" i kaldırmak ve "inline-block" ile değiştirmek zorunda kaldım, sonra çalışmaya başladı.
— theMayer
Mükemmel bir çözümdür.
— Renato Lazaro
47

Orijinal yazı, çökmüş navbarın nasıl ortalanacağını soruyordu. Elemanları normal gezinme çubuğunda ortalamak için şunu deneyin:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}
— Radu Rascol
kaynak
23

Navbar'ı kabın içine koymak zorunda olmayan ve herhangi bir CSS veya Bootstrap geçersiz kılma gerektirmeyen düzenler için bunu yapmanın başka bir yolu var.

Navbar'ın containeretrafına Bootstrap sınıfıyla bir div yerleştirin . Bu, navbar içindeki bağlantıları ortalayacaktır:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

Daha sonra gövde içeriğini merkez gezinme çubuğuna hizalamak istiyorsanız, bu gövde içeriğini Bootstrap containeretiketine de koyarsınız .

<div class="container">
  <! -- body content here -->
</div>

Herkes bu tür bir düzeni kullanamaz (bazı kişilerin navbar'ı içine yerleştirmesi gerekir container). Bununla birlikte, bunu yapabiliyorsanız, navbar bağlantılarınızı ve vücudunuzu merkezlemenin kolay bir yoludur.

Sonuçları bu tam sayfada görebilirsiniz JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Kaynak: http://jsfiddle.net/bdd9U/229/

— Eric S. Bullington
kaynak
13
Hm, bu çözüm artık işe yaramıyor. Örneğiniz şimdi sola hizalanmıştır.
— Bjarte Aune Olsen
benim için işe yaramadı, ancak çözümünüzün basitliğini takdir edin!
— Ben Casalino
12

Bu kod benim için çalıştı 

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
— Shuhad zaman
kaynak
8

Bootstrap 4 için:

Sadece kullan

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

mx-auto işi yapacak

— Hezy Ziv
kaynak
8

2020 Güncellemesi ...

Bootstrap 4

Navbar içeriğini merkezlemek daha kolay Bootstrap 4'tür ve burada açıklanan birçok merkezleme senaryosunu görebilirsiniz: https://stackoverflow.com/a/20362024/171456

Önyükleme 3

Henüz cevaplanmış görünmüyor başka senaryo ortalama olan hem marka ve navbar bağlantıları . İşte bir çözüm ..

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

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

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

Ayrıca bkz: Sola, ortaya veya sağa hizalanmış öğeler içeren Bootstrap NavBar

— Zim
kaynak
4

Bootstrap resmi sitesinden (ve neredeyse, Eric S. Bullington'un dediği gibi).

https://getbootstrap.com/components/#navbar-default

örnek navbar şuna benzer:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

nav merkezlemek için, ben ne yaptım:

<div class="container-fluid" id="nav_center">

css:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

class = "container" ve navbar-right veya left ile çalışın ve elbette kimliği sınıfa göre değiştirebilirsiniz. : D

— NoZero
kaynak
3

Tüm bu cevaplar bootstrap üstünde özel css içerir gibi görünüyor. Verdiğim cevap sadece bootstrap kullanıyor, bu yüzden özelleştirmeleri sınırlamak isteyenler için kullanılmasını umuyorum.

Bu Bootstrap V3.3.7 ile test edildi

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>
— Tommy May
kaynak
2

bu çalışmalı 

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
— Govan
kaynak
1

Aşağıdaki html'yi kullanın

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

Ve css

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

İhtiyaçlarınıza göre değiştirin

— Alexander Gorelik
kaynak
1

BootStrap'ın V4 sürümü, https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment biçiminde Merkez (yaslama-içerik merkezi) ve Doğru Hizalama (yaslama-içerik sonu) ekliyor

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 disabled" href="#">Disabled</a>
  </li>
</ul>
— Kodlayıcı
kaynak
Bunun işe yaradığından emin misin? Denedim ama benim li'ler tam genişlik olduğu için bu bir fark
— yaratmaz
Merhaba Nuno biz evet kesinlikle çalışıyor, bizim app bu yüzden hala kullanımda, bizim app üstünde yatay bir menü kullanıyoruz.
— Coder
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.