Bootstrap 4 gezinme çubuğu öğelerini sağa hizala

341

Bir gezinme çubuğu öğesini sağa nasıl hizalayabilirim?

Giriş yapmak ve sağa kaydolmak istiyorum. Ama denediğim her şey işe yaramıyor.

Resim Navbar

Şimdiye kadar denedim budur:

  • <div>etrafında <ul>atribute ile:style="float: right"
  • <div>etrafında <ul>atribute ile:style="text-align: right"
  • <li>Etiketlerdeki bu iki şeyi denedim
  • !importantsonuna kadar eklenen tüm bu şeyleri tekrar denedim
  • değişti nav-itemiçin nav-rightde<li>
  • bir pull-sm-rightsınıf ekledi<li>
  • bir align-content-endsınıf ekledi<li>

Bu benim kodum:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
css  twitter-bootstrap  flexbox  bootstrap-4  navbar 
— Luuk Wuijster
kaynak
Gezinme çubukları alpha 6 sürümündeki flexbox ile üretilmiştir.
— maksimum
1
Evet, sağa hizalamak için ne yapmam gerekiyor? Zaten şanssız birkaç flexbox şeyi denedim. : /
— Luuk Wuijster

Yanıtlar:

530

Bootstrap 4'te gezinme çubuğu öğelerini hizalamanın birçok farklı yolu vardır . float-rightçalışmaz çünkü navbar şimdi flexbox.

1. (solda) mr-autootomatik sağ kenar boşluğu için kullanabilirsiniz . Alternatif , üzerinde kullanılabilir 2. (sağ) sadece tek bir varsa ya .navbar-navml-autonavbar-navnavbar-nav

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/login') }}">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/register') }}">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

Flexbox araçları da vardır. Bu durumda, 2 var navbar-navs, bu yüzden justify-content-betweende navbar-collapsearalarında bile boşluk çalışacak,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

Bootstrap 4.0 ve daha yeni bir güncelleştirme

Bootstrap 4 beta sürümünden itibaren, ml-autoöğeleri sağa doğru itmeye devam edecektir. Sadece farkında navbar-toggleable-sınıflar için değiştinavbar-expand-*

Bootstrap 4 için güncellenmiş navbar hakkı

Bir başka sık Bootstrap 4 Navbar sağ hizalama senaryosu, sağda mobil daraltma navının dışında kalan bir düğmeyi içerir, böylece her zaman tüm genişliklerde gösterilir.

Her zaman görünür olan sağa hizala düğmesi

resim açıklamasını buraya girin

resim açıklamasını buraya girin

İlgili: Sola, ortaya veya sağa hizalanmış öğeler içeren Bootstrap NavBar

— Zim
kaynak
1
mr-autoen sağdaki öğe bir ise çalışmaz dropdown. Açılır öğeler sayfanın sağ kenarına taşar.
— Ege Ersoz
6
Çalışır: codeply.com/go/P0G393rzfm - sorun, çalışanınmr-auto doğru hizalanmasıyla ilgili değildir . Açılır listeyle ilgili endişeleriniz varsa yeni bir soru gönderin, ancak büyük olasılıkla bu konuya atıfta bulunuyorsunuz: stackoverflow.com/questions/43867258/…
— Zim
2
.dropdown-menu-rightGezinme çubuğundaki sağa hizalı açılır listelere de ekleyebilirsiniz . Bunu yapmamak, belirli genişliklerde açılır menüyü kesebilir.
— rybo111
@ZimSystem cevaplarınız için teşekkür ederim. Cevabınızı buraya takip ediyorum stackoverflow.com/questions/19733447/… . Bir öğenin sol tarafta ve bir öğenin sağ tarafında olmasını nasıl sağlayabilirim?
— Lokesh Pandey
In codeply.com/go/P0G393rzfm , solda tek ul ve sağda bir ul gösterdik. Bu, ilkine mr-auto ekleyerek elde edildi . Peki ya sadece bir ulim varsa? Sadece sağa doğru başka bir tane hizalamak için boş bir ul oluşturmak istemiyorum.
— Santosh Kumar
140

Benim durumumda, sadece bir gezinme düğmesi / seçenek kümesi istedim ve bunun işe yarayacağını buldum:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

Böylece justify-content-enddiv'e ekleyecek mr-autove listede atlayacaksınız .

İşte çalışan bir örnek .

— Craig van Tonder
kaynak
3
@numediaweb OPs örneğinde, gezinme bölmesinde bir sola ve bir sağa hizalayarak iki öğe kullanır; burada sadece birini kullandım ve sağa hizaladım. Bu doğru cevap değil ama sorunun hafif bir varyasyonuna bir cevap olarak yararlı;)
— Craig van Tonder
Bu, tek bir navbar-nav için çalışır, ancak mr-autoyöntem kullanılır Bootstrap docs .
— Zim
mr-autodokümanlarda kullanılır, ancak öğeleri sola hizalamak için kullanılmaz. Bu yanıt, bu makalede bahsedildiği gibi anlamsal olarak doğrudur: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
— qwaz
Soru şu ki, 2 veya 1 bağlantı listesini hizalamaya çalışıyorsunuz. Sadece 1 ise, cevabınız işe yarar ve bana çok yardımcı oldu. Teşekkürler!
— barefootsanders
Benim için çalıştı, ama bu cevabın üstündeki neden neden işe yaramadığını bilmiyorum.
— Suhail Akhtar
59

BS4'te bu sorunla hala mücadele edenler için aşağıdaki kodu deneyin - 

<ul class="navbar-nav ml-auto">
— Muhammed Tarık
kaynak
7
Hayır - bu her şeyi sağa hizalar. Soru, sadece tek bir öğeyi sağa hizalamak istediğini söylüyor.
— NickG
2
m*-autoSınıfı nereye koyduğunuza bağlı olarak içeriği sola veya sağa iten resmi dokümanı kontrol edin
— Pierre de LESPINAY
@PierredeLESPINAY, evet ml-autoiçeriği en doğru konuma itiyor, ancak neden mr-0işi yapamayacağımı merak ettim ?
— avokado
42

Bootstrap 4 üzerinde

Align sola doğru marka ve sağa doğru navbar-kalemleri için, varsayılan ayarı değiştirmek mr-autoiçinml-auto

<ul class="navbar-nav ml-auto">
— Sebastian Sebastian
kaynak
32

Tarihinde Bootsrap 4.0.0-beta.2, burada listelenen cevapların hiçbiri işe yaramadı. Son olarak, Bootstrap sitesi bana dokümanı değil, sayfa kaynak koduyla çözümü verdi ...

Getbootstrap.com hizalama onların hakkıdır navbar-navaşağıdaki sınıfının yardımıyla sağa: ml-md-auto.

— ClemC
kaynak
1
Benim için güzel çalıştı. Başka bir şey olmadı.
— Maria Campbell
14

Kullanım ml-autoyerine mr-autouygulandıktan sonra navhiç haklı-içerik uçul

— James Pike
kaynak
9

Öğeleri sağa taşımak için bu kodu kullanın.

<div class="collapse navbar-collapse justify-content-end">
— Maijied Hasan Shuvo
kaynak
1
daraltılmış bir Menünüz olduğunda çalışmaz, ancak ml-auto ile çalışmaya devam eder, çünkü menü daraltıldığında, <li> öğeleri hala genişliğin% 100'ünü alır, böylece kenar boşluğu uygulanmaz.
— Ryan S
8

Ev, Özellikler ve Fiyatlandırma işleminizi hemen ardından solunuzda nav-brandyapın ve ardından giriş yapın ve sağda kaydolun, ardından iki listeyi sarın <div>ve kullanın .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
— J Kennedy
kaynak
7

Sadece şuraya mr-autosınıf ekleyin ul:

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

Her iki tarafta menü listeniz varsa, böyle bir şey yapabilirsiniz:

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">left 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">left 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">left disable</a>
  </li>
</ul>
— SKL
kaynak
5

flex-row-reverse sınıfını kullanma

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>
— mubsher
kaynak
2

Takviye 4'teki küçük değişiklik. Navbar'ı sağ tarafa hizalamak için sadece iki değişiklik yapmanız gerekir. onlar:

  1. de navbar-navsınıf eklenti w-100olarak navbar-nav w-100100 olarak genişliği yapmak
  2. içinde nav-item dropdownsınıf eklenti ml-autoolarak nav-item dropdown ml-automarj oto olarak sola yapmak.

Eğer anlamadıysanız, lütfen buna eklediğim resme bakın.

CodePen Bağlantısı

resim açıklamasını buraya girin

Tam kaynak kodu

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>
— Anand Raja
kaynak
2

Bootstrap 4.3.1 için nav-hapları kullanıyordum ve bunun dışında hiçbir şey işe yaramadı:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>
— Ajay Kumar
kaynak
2

Önyükleme v4.3 olarak sadece eklemek ml-autode <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

— Mohit Prajapati
kaynak
0

Açısal 4 (v.4.0.0) ve ng-bootstrap (Bootstrap 4) kullanıyorum. Bu kodun hepsi alakalı olmayacak, ancak insanların neyin işe yaradığını seçip seçebileceğini ummak. Öğelerimi doğru bir şekilde doğrulamak, düzgün bir şekilde daraltmak ve google (OAuth kullanarak) profil resmimden bir açılır liste uygulamak için bir çözüm bulmam biraz zaman aldı.

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>
— GrettyGoose
kaynak
0

Bootstrap 4 beta için, öğeleri sağ tarafa hizalanmış örnek navbar:

<div id="app" class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>
— Kaczor
kaynak
0

Bootstrap esnek kutusunu kullanmak, navigasyon öğenizin yerleşimini ve hizalamasını kontrol etmemize yardımcı olur. Yukarıdaki sorun için mr-auto eklemek buna daha iyi bir çözümdür.

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

diğer yerleşimler şunları içerebilir 

fixed- top
    fixed bottom
    sticky-top
— maro
kaynak
0

BS için çalışma örneği v4.0.0-beta.2 :

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
— belgoros
kaynak
0

Yukarıdakilerin tümü başarısız olursa, CSS'deki navbar sınıfına% 100 genişlik ekledim. O zamana kadar Bay Auto, 4.1 kullanarak bu projede benim için çalışmadı.

— Dominic Davies
kaynak
-1

Verndor-prefixes.less içindeki 69 satırını bulun ve aşağıdakileri yazın:

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
Snippet'i genişlet

— Paul
kaynak
-2

Bunu, yukarıdakilerden çok daha iyi çalışan yayınlanmış sürüm 4 için getbootstrap sayfalarından birinden kopyaladım.

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div>
— Gary Molton
kaynak
-3

Taşma yığını ve ön uç geliştirmede yeniyim. Bu benim için işe yaradı. Bu yüzden liste öğelerinin görüntülenmesini istemedim.

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

— MSangha
kaynak
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.