Pusatkan konten di navbar bootstrap responsif

221

Saya mengalami masalah saat memusatkan konten saya di navbar bootstrap. Saya menggunakan bootstrap 3. Saya sudah membaca banyak posting, tetapi CSS atau metode yang digunakan tidak akan berfungsi dengan kode saya! Saya benar-benar frustrasi, jadi ini adalah pilihan terakhir saya. Bantuan apa pun akan dihargai!

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

457

Saya pikir ini yang Anda cari. Anda perlu menghapus float: leftdari nav bagian dalam ke pusat dan membuatnya menjadi blok-inline.

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

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

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

Sunting: jika Anda hanya ingin efek ini terjadi ketika nav tidak diciutkan, mengelilinginya dalam kueri media yang sesuai.

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

haji
sumber

Jika Anda memiliki masalah dengan ruang tambahan di bawah tautan (jika Anda menggunakan latar belakang yang berbeda untuk tautan aktif misalnya), Anda dapat menggunakan:.navbar .navbar-collapse { line-height: 0px; }

jenniwren

3

Saya akan merekomendasikan untuk tidak bermain dengan bootstrap.css asli. Sebaliknya, buat gaya Anda sendiri.

Faizan Mubasher

Dalam kasus saya, saya harus menghapus "flex" dan ganti dengan "inline-block," kemudian mulai bekerja.

theMayer

Merupakan solusi sempurna.

Renato Lazaro

47

Posting asli bertanya bagaimana cara memusatkan navbar yang runtuh. Untuk memusatkan elemen pada navbar normal, coba ini:

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

.navbar-nav > li {
    display: inline-block;
    float:none;
}

Radu Rascol
sumber

23

Ada cara lain untuk melakukan ini untuk tata letak yang tidak harus meletakkan navbar di dalam wadah, dan yang tidak memerlukan CSS atau override Bootstrap.

Cukup letakkan div dengan containerkelas Bootstrap di sekitar navbar. Ini akan memusatkan tautan di dalam navbar:

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

Jika Anda ingin menyelaraskan konten isi ke navbar tengah, Anda juga meletakkan konten isi itu di containertag Bootstrap .

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

Tidak semua orang dapat menggunakan jenis tata letak ini (beberapa orang perlu membuat navbar sendiri di dalam container). Meskipun demikian, jika Anda bisa melakukannya, ini adalah cara mudah untuk membuat tautan navbar dan tubuh Anda terpusat.

Anda dapat melihat hasilnya di JSFiddle halaman penuh ini: http://jsfiddle.net/bdd9U/231/embedded/result/

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

Eric S. Bullington
sumber

13

Hm, solusi ini sepertinya tidak berfungsi lagi. Contoh Anda dibiarkan selaras sekarang.

Bjarte Aune Olsen

tidak bekerja untuk saya, tetapi menghargai kesederhanaan solusi Anda!

Ben Casalino

12

Kode ini bekerja untuk saya

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}

Shuhad zaman
sumber

8

Untuk Bootstrap 4:

Gunakan saja

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

mx-auto akan melakukan pekerjaan

Hezy Ziv
sumber

8

Perbarui 2020 ...

Bootstrap 4

Memusatkan konten Navbar lebih mudah adalah Bootstrap 4, dan Anda dapat melihat banyak skenario pemusatan yang dijelaskan di sini: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Skenario lain yang tidak tampaknya telah dijawab belum adalah berpusat baik yang merek dan link navbar . Inilah solusinya ..

.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

Lihat juga: Bootstrap NavBar dengan item rata kiri, tengah atau kanan

Zim
sumber

4

dari situs resmi bootstrap (dan, hampir, seperti kata Eric S. Bullington.

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

contoh navbar terlihat seperti:

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

ke pusat nav, bahwa apa yang telah saya lakukan:

<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*/
    }
}

bekerja dengan class = "container" dan navbar-kanan atau kiri, dan tentu saja Anda dapat mengganti id dengan kelas. : D

NoZero
sumber

3

Sepertinya semua jawaban ini melibatkan custom css di atas bootstrap. Jawaban yang saya berikan hanya menggunakan bootstrap, jadi saya harap ini digunakan untuk mereka yang ingin membatasi penyesuaian.

Ini diuji dengan Bootstrap V3.3.7

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

2

ini seharusnya bekerja

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

Pemerintah
sumber

1

Gunakan html berikut

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

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

Ubah sesuai dengan kebutuhan Anda

Alexander Gorelik
sumber

1

V4 dari BootStrap menambahkan Center (justify-content-center) dan Right Alignment (justify-content-end) sesuai: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

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

Sang Coder
sumber

Apakah Anda yakin ini berhasil? Saya mencoba tetapi karena li saya lebar penuh ini tidak ada bedanya

gota

Hai Nuno kita menggunakan ini di aplikasi kita jadi ya itu pasti berfungsi, adalah menu horisontal di bagian atas aplikasi kita, masih digunakan.

The Coder

Pusatkan konten di navbar bootstrap responsif

Jawaban: