Bootstrap 4 Navbar align right

Question

Tôi đang làm việc trên một mẫu thanh điều hướng từ trang web Bootstrap 4 nhưng tôi đang gặp vấn đề liên quan đến posistion của các mục nav thu gọn. Ban đầu, nút chuyển đổi được đặt ở phía bên trái của thanh điều hướng cũng như các mục danh sách.

Nhưng tôi muốn chúng ở bên phải của trang, vì vậy tôi đã chèn một lớp float-xs-right vào nút và các mục điều hướng. Sau đó, nếu tôi nhấp vào nút bật tắt, các mục thu gọn sẽ không được định vị chính xác. Như bạn có thể thấy trên ảnh chụp màn hình.

Navbar screenshot

Tôi muốn các mặt hàng sụp đổ để được bố trí bên dưới và ở phía bên trái.

Btw, đây là mã của tôi:

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

Ngoài ra, đây là codepen tôi cho navbar này:

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

Cảm ơn bạn trước.

Answer 1

Đối với Bootstrap 4 Alpha 6/Beta: Bootstrap 4 align navbar item to the right

Đây là cách thích hợp để làm điều đó. Bạn muốn làm nổi menu bên trái theo mặc định. Float nút bên phải (float-xs-right) trên mọi thứ nhưng không thể nhìn thấy (hidden-lg-up) và sau đó float-lg-rightul để nó hoạt động như bạn muốn.

Xem codepen này:

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

Nó hoạt động tốt.

Note CSS bổ sung này:

@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

Xin chào Xem ví dụ bên dưới.Thật tôi đã làm theo cách khác nhưng Hy vọng bạn đang tìm kiếm điều này.

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

Xem Các Fiddle NavBar Fiddle Demo

hy vọng nó giúp.