Bootstrap 4 Navbar sağa hizalanıyor

Question

Bootstrap 4 web sitesinden bir navbar şablonu üzerinde çalışıyorum ancak çöküş nav öğelerinin konumuyla ilgili bir sorun yaşıyorum. Başlangıçta, geçiş butonu navbarın sol tarafında ve liste kalemlerinde yer almaktadır.

Ama onların sayfanın sağ tarafında olmasını istiyorum, bu yüzden düğme ve nav öğelerine bir float-xs-sağ sınıfı ekledim. Sonra geçiş düğmesine tıklarsam, daraltılmış öğeler doğru şekilde konumlandırılmaz. Ekran görüntüsünde gördüğünüz gibi.

Navbar screenshot

Ben çöküşü ürün altında ve sol tarafta konumlandırılmış olmak istiyorum.

Btw, burada benim kod: Ayrıca

<nav class="navbar navbar-light bg-faded"> 
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 

<div class="collapse navbar-toggleable-md" id="main-navbar"> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Bio</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Gallery</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Details</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Awards</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">More info</a> 
    </li> 
    </ul> 
</div> 
</nav> 

, burada bu gezinme çubuğu benim codepen var:

http://codepen.io/marcvs/pen/PGvqBO

şimdiden teşekkürler.

Answer 1

: Bootstrap 4 align navbar item to the right

Bunu yapmanın en iyi yolu. Menüyü varsayılan olarak sola kaydırmak istersiniz. Düğmeyi sağa (float-xs-right) her şeyden geçirin ama görülemez (hidden-lg-up) ve daha sonraul istediğiniz gibi çalışmasını sağlayabilirsiniz. Düzgün çalışır

http://codepen.io/anon/pen/mAYAKd?editors=1100

:

bu codepen bakın.

Not Bu ilave CSS:

@media screen and (max-width: 992px){ 
    #main-navbar { 
     clear: both; 
    } 
} 

HTML:

<nav class="navbar navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 

    <div class="collapse navbar-toggleable-md" id="main-navbar"> 
     <ul class="nav navbar-nav float-lg-right"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Bio</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Gallery</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Details</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Awards</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">More info</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 

Answer 2

Merhaba Aşağıdaki örneğe bakın. Bunu başka bir şekilde yaptım, ancak Umut bunu arıyorsunuz. See The Fiddle NavBar Fiddle Demo

<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data- 
    target="#navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    &nbsp; 
    </div> 
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1">  
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Bio</a></li> 
    <li><a href="#">Details</a></li> 
    <li><a href="#">Award</a></li> 
    <li><a href="#">More info</a></li> 

    </ul> 
    </div> 
    </nav> 

O yardımcı olur Umut. Önyükleme 4 Alpha 6/Beta için