Bootstrap 4 căn chỉnh các mục thanh điều hướng sang phải


340

Làm thế nào để tôi căn chỉnh một mục thanh điều hướng cho phải?

Tôi muốn đăng nhập và đăng ký ở bên phải. Nhưng mọi thứ tôi thử dường như không hoạt động.

Hình ảnh của Navbar

Đây là những gì tôi đã cố gắng cho đến nay:

  • <div>xung quanh <ul>với thuộc tính:style="float: right"
  • <div>xung quanh <ul>với thuộc tính:style="text-align: right"
  • đã thử hai thứ trên <li>thẻ
  • đã thử tất cả những điều đó một lần nữa với !importantkết thúc
  • đổi nav-itemthành nav-righttrong<li>
  • thêm một pull-sm-rightlớp vào<li>
  • thêm một align-content-endlớp vào<li>

Đây là mã của tôi:

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

Navbars được xây dựng với flexbox từ phiên bản alpha 6.
tối đa

1
Vâng, vậy tôi phải làm gì để nó đi thẳng sang phải. Tôi đã thử một vài thứ flexbox mà không gặp may mắn. : /
Luuk Wuijster

Câu trả lời:


526

Bootstrap 4nhiều cách khác nhau để căn chỉnh các mục thanh điều hướng . float-rightSẽ không hoạt động vì thanh điều hướng bây giờ flexbox.

Bạn có thể sử dụng mr-autocho lề phải tự động vào ngày 1 (bên trái) navbar-nav. Ngoài ra , ml-autocó thể được sử dụng vào ngày 2 (bên phải) navbar-navhoặc nếu bạn chỉ có một navbar-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

Ngoài ra còn có dụng cụ flexbox. Trong trường hợp này, bạn có 2 navbar-navs, vì vậy justify-content-betweentrong navbar-collapsesẽ làm việc ngay cả những không gian giữa chúng,

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


Cập nhật cho Bootstrap 4.0 và mới hơn

Kể từ Bootstrap 4 beta, ml-autovẫn sẽ hoạt động để đẩy vật phẩm sang phải. Chỉ cần lưu ý rằng các navbar-toggleable-lớp đã thay đổi thànhnavbar-expand-*

Thanh điều hướng được cập nhật ngay cho Bootstrap 4


Một kịch bản căn chỉnh bên phải khác của Bootstrap 4 Navbar bao gồm một nút ở bên phải vẫn nằm ngoài điều hướng thu gọn di động để nó luôn được hiển thị ở mọi độ rộng.

Nút căn phải luôn hiển thị

nhập mô tả hình ảnh ở đây

nhập mô tả hình ảnh ở đây


Liên quan: Bootstrap NavBar với các mục được căn trái, giữa hoặc phải


1
mr-autokhông hoạt động nếu mục đúng nhất là a dropdown. Các mục thả xuống tràn ra cạnh phải của trang.
Ege Ersoz

6
Nó hoạt động: codeply.com/go/P0G393rzfm - vấn đề không phải mr-autolà câu hỏi liên quan đến việc căn chỉnh quyền nào hoạt động. Đăng câu hỏi mới nếu bạn lo ngại về việc thả xuống, nhưng rất có thể bạn đang đề cập đến vấn đề này: stackoverflow.com/questions/43867258/ Kẻ
Zim

2
Bạn cũng có thể thêm .dropdown-menu-rightvào danh sách thả xuống được căn phải trong thanh điều hướng. Không làm như vậy có thể cắt bỏ thả xuống ở độ rộng nhất định.
rybo111

@ZimSystem cảm ơn bạn đã trả lời. Tôi đã theo dõi câu trả lời của bạn ở đây stackoverflow.com/questions/19733447/ . Tôi có một câu hỏi làm thế nào tôi có thể đạt được một mục ở bên trái và một mục ở bên phải?
Lokesh Pandey

Trong codeply.com/go/P0G393rzfm , bạn đã hiển thị một ul bên trái và một ul bên phải. Điều đó đã đạt được bằng cách thêm mr-auto vào cái đầu tiên. Nhưng nếu tôi chỉ có một ul thì sao? Tôi không muốn tạo ra một ul trống chỉ để sắp xếp một cái khác ở bên phải.
Santosh Kumar

140

Trong trường hợp của tôi, tôi chỉ muốn một bộ nút / tùy chọn điều hướng và thấy rằng điều này sẽ hoạt động:

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

Vì vậy, bạn sẽ thêm justify-content-endvào div và bỏ qua mr-autotrong danh sách.

Dưới đây là một ví dụ làm việc .


3
@numediaweb Trong ví dụ về OP, anh ta sử dụng hai yếu tố trong điều hướng, căn chỉnh một bên trái và một bên phải; nơi tôi chỉ sử dụng một và căn chỉnh nó ở bên phải. Đây không phải là câu trả lời đúng nhưng nó hữu ích như một câu trả lời cho một biến thể nhỏ của câu hỏi;)
Craig van Tonder

Điều này hoạt động cho một navbar-nav duy nhất, nhưng mr-autophương thức được sử dụng trong các tài liệu Bootstrap .
Zim

mr-autođược sử dụng trong tài liệu, nhưng không được sắp xếp các mục ở bên trái. Câu trả lời này đúng về mặt ngữ nghĩa như được đề cập trong bài viết này: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
qwaz

Câu hỏi là bạn đang cố gắng sắp xếp 2 danh sách các liên kết hoặc 1. Nếu chỉ 1, câu trả lời của bạn hoạt động và rất hữu ích với tôi. Cảm ơn!
chụp chân trần

Nó làm việc cho tôi, nhưng tôi không biết tại sao câu trả lời trên không có tác dụng.
Suhail Akhtar

59

Đối với những người vẫn đang vật lộn với vấn đề này trong BS4, chỉ cần thử mã bên dưới -

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

7
Không - điều đó sắp xếp mọi thứ ở bên phải. Câu hỏi nói rằng anh ta chỉ muốn sắp xếp một mục duy nhất ở bên phải.
NickG

2
Kiểm tra tài liệu chính thức về việc m*-autođẩy nội dung sang trái hoặc phải tùy thuộc vào nơi bạn đặt lớp
Pierre de LESPINAY

@PierredeLESPINAY, vâng, có ml-autođẩy nội dung lên vị trí cao nhất không, nhưng tôi chỉ tự hỏi tại sao mr-0không thể thực hiện công việc?

42

Trên Bootstrap 4

Nếu bạn muốn căn chỉnh thương hiệu ở bên trái và tất cả các mục điều hướng sang phải, hãy thay đổi mặc định mr-autothànhml-auto

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

32

Trên Bootsrap 4.0.0-beta.2 , không có câu trả lời nào được liệt kê ở đây làm việc cho tôi. Cuối cùng, trang Bootstrap đã cho tôi giải pháp, không phải thông qua tài liệu của nó mà thông qua mã nguồn trang của nó ...

Getbootstrap.com sắp xếp quyền của họ ở bên navbar-navphải với sự giúp đỡ của lớp sau : ml-md-auto.


1
Làm việc rất đẹp cho tôi. Không có gì khác làm.
Maria Campbell

14

Sử dụng ml-autothay vì mr-autosau khi áp dụng navjustify-content-end choul


9

Sử dụng mã này để di chuyển các mục bên phải.

<div class="collapse navbar-collapse justify-content-end">

1
Điều đó sẽ không hoạt động khi bạn có Menu bị sập, tuy nhiên, với ml-auto, nó vẫn hoạt động vì khi menu bị sập, các mục <li> vẫn chiếm 100% chiều rộng nên sẽ không áp dụng lề.
Ryan S

8

Nếu bạn muốn Trang chủ, Tính năng và Giá cả ở bên trái ngay sau bạn nav-brand, sau đó đăng nhập và đăng ký ở bên phải, sau đó bọc hai danh sách <div>và sử dụng .justify-content-between:

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

7

Chỉ cần thêm mr-autolớp tại ul:

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

Nếu bạn có danh sách menu ở cả hai bên, bạn có thể làm một cái gì đó như thế này:

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

5

sử dụng lớp flex-row-Reverse

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

2

Đó là một chút thay đổi trong boostrap 4. Để căn chỉnh thanh điều hướng sang bên phải, bạn chỉ thực hiện hai thay đổi. họ đang:

  1. trong navbar-navlớp học thêm w-100như navbar-nav w-100để làm cho chiều rộng là 100
  2. trong nav-item dropdownlớp thêm ml-autonhư nav-item dropdown ml-autođể làm cho lề trái là tự động.

Nếu bạn không hiểu, vui lòng tham khảo hình ảnh mà tôi đã đính kèm.

Liên kết CodePen

nhập mô tả hình ảnh ở đây

Mã nguồn đầy đủ

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

2

Đối với bootstrap 4.3.1, tôi đã sử dụng thuốc điều hướng và không có gì hiệu quả với tôi ngoại trừ điều này:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

2

Trong bootstrap v4.3 chỉ cần thêm ml-autovào <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">


0

Tôi đang chạy Angular 4 (v.4.0.0) và ng-bootstrap (Bootstrap 4). Mã này sẽ không liên quan nhưng hy vọng mọi người có thể chọn và chọn những gì hoạt động. Đôi khi tôi phải tìm một giải pháp để làm cho các mục của mình được chứng minh là đúng, thu gọn đúng cách và thực hiện thả xuống hình ảnh hồ sơ google (sử dụng OAuth) của tôi.

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

0

Đối với Bootstrap 4 beta, thanh điều hướng mẫu với các thành phần được căn chỉnh ở phía bên phải là:

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

0

Sử dụng hộp flexstrap giúp chúng tôi kiểm soát vị trí và căn chỉnh của yếu tố điều hướng của bạn. cho vấn đề trên, thêm mr-auto là một giải pháp tốt hơn cho nó.

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

vị trí khác có thể bao gồm

fixed- top
    fixed bottom
    sticky-top

0

Ví dụ làm việc cho BS 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>

0

Nếu tất cả ở trên không thành công, tôi đã thêm 100% chiều rộng cho lớp thanh điều hướng trong CSS. Cho đến lúc đó, mr auto đã không làm việc cho tôi trong dự án này bằng cách sử dụng 4.1.


-1

Tìm dòng 69 trong verndor-prefixes.less và viết nó như sau:

.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);
}


-2

Chỉ cần sao chép này từ một trong những trang getbootstrap cho phiên bản 4 đã phát hành, hoạt động tốt hơn nhiều so với ở trên

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

-3

Tôi mới sử dụng stack stack và mới phát triển front end. Đây là những gì làm việc cho tôi. Vì vậy, tôi không muốn danh sách các mục được hiển thị.

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

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.