Bootstrap 4 navbar item pada sisi kanan

Aku hanya beralih ke bootstrap 4 dan pengerjaan ulang semua html saya dan scss untuk bekerja dengan itu dan saya cant tampaknya untuk menemukan cara untuk menempatkan sekelompok nav-item pada sisi kanan navbar. Ini adalah saya navbar kode:

<nav class="navbar navbar-full navbar-dark bg-primary">
        <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
        <div class="collapse navbar-toggleable-sm" id="navbarResponsive"> 
            <ul class="nav navbar-nav float-md-left">
                <li class="nav-item">
                    <%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
                            <%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
                    <% end %>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
                    <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                        <%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav float-md-right">
                <% if user_signed_in? %>
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <%= current_user.displayname.present? ? "D-ring" : current_user.firstname %>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                            <%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %>
                            <%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %>
                        </div>
                    </li>
                <% else %>
                    <li class="nav-item">
                        <%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %>
                    </li>
                    <li class="nav-item">
                        <%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %>
                    </li>         
                <% end %>
            </ul>
        </div>
    </nav>

Dan ini adalah screenshot dari apa yang tampak seperti

Martin Lindgren
Pertanyaan edit 25 September 2017 в 3:22
Pemrograman
bootstrap-4
21 Oktober 2016 в 1:49
120 tayangan
Mengomentari pertanyaan (2)
Larutan

TL;DR:

Membuat yang lain <ul class="navbar-nav ml-auto"> untuk navbar item yang anda inginkan di sebelah kanan. ml-auto akan menarik anda navbar-nav ke kanan di mana mr-auto akan menariknya ke kiri.

Diuji terhadap Bootstrap v4.1.3






    /* Stackoverflow preview fix, please ignore */
    .navbar-nav {
      flex-direction: row;
    }

    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }

    /* Fixes dropdown menus placed on the right side */
    .ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }




  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown on Right</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
      </div>
    </li>
  </ul>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Seperti yang anda lihat tambahan styling aturan yang telah ditambahkan ke akun untuk beberapa keanehan di Stackoverflows kotak pratinjau. Anda harus dapat dengan aman mengabaikan aturan-aturan dalam proyek anda.

Sebagai v4.0.0 hal ini tampaknya menjadi cara resmi untuk melakukannya.

EDIT: aku dimodifikasi Posting untuk mencakup dropdown ditempatkan pada sisi kanan navbar seperti yang disarankan oleh @Bruno. Itu membutuhkan kiri dan kanan atribut untuk menjadi terbalik. Saya menambahkan ekstra cuplikan css untuk awal kode contoh. Harap dicatat, bahwa contoh yang menunjukkan versi mobile ketika anda klik Run code snippet tombol. Untuk melihat versi desktop, anda harus klik Memperluas cuplikan tombol. 

.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

Termasuk dalam stylesheet anda harus melakukan trik.

eyllanesc
Jawaban edit 11 Agustus 2018 в 4:56
Komentar (10)

Di versi 4, lebih mudah. Hanya menempatkan ml-auto kelas ul seperti:

<ul class="nav navbar-nav ml-auto">
Ashley Brown
Jawaban edit 18 Oktober 2017 в 8:00
Komentar (6)

Ini harus bekerja untuk alpha 6. Kuncinya adalah kelas "bapak-auto" pada navigasi sebelah kiri, yang akan mendorong hak nav ke kanan. Anda juga perlu menambahkan navbar-toggleable-md atau itu akan menumpuk di kolom bukannya turut. Catatan saya didn't tambahkan sisa beralih item (misalnya tombol toggle), saya menambahkan hanya cukup untuk mendapatkan itu untuk diformat seperti yang diminta. Di sini lebih lengkap contoh https://v4-alpha.getbootstrap.com/examples/navbars/. 








        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</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>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link on the Right</a>
                </li>
            </ul>
        </div>
davidkonrad
Jawaban edit 20 Juni 2017 в 10:56
Komentar (1)

Saya telah bekerja codepen dengan kiri dan kanan sejajar link nav bahwa semua runtuh ke menu responsif bersama-sama menggunakan .membenarkan-konten-antara pada orang tua tag: https://codepen.io/epan/pen/bREVVW?editors=1000



    <span class="navbar-toggler-icon"></span>

  <a class="navbar-brand" href="#">Acme</a>
  <div class="collapse navbar-collapse justify-content-between" id="navbar">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Ball Bearings</a>
      <a class="nav-item nav-link" href="#">TNT Boxes</a>
    </div>
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Logout</a>
    </div>
  </div>
epan
Jawaban edit 9 Juni 2017 в 12:08
Komentar (0)

Di Bootstrap 4 alpha-6 versi, Seperti navbar adalah menggunakan model flex, anda dapat menggunakan membenarkan-content-end di orang tua's div dan menghapus mr-auto.

<div class="collapse navbar-collapse justify-content-end" id="navbarText">
  <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="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

Ini bekerja seperti pesona :)

Komentar (0)

Dengan Bootstrap v4.0.0-alpha.6: Dua <ul>s (.navbar-na), satu .mr-auto dan satu .ml-auto:


  ...     
  <div class="collapse navbar-collapse">
    <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="#">Left Link </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Right Link </a>
      </li>
    </ul>
  </div>
Komentar (0)

Dalam kasus saya, saya sedang mencari solusi yang memungkinkan one dari navbar item harus benar selaras. Dalam rangka untuk melakukan ini, anda harus menambahkan style="width:100%;" ke <ul class="navbar-nav"> dan kemudian tambahkan ml-auto kelas untuk anda navbar item.

Komentar (0)

Di sini dan Contoh yang mudah.




    <div class="container">

            <span class="navbar-toggler-icon"></span>

        <div class="collapse navbar-collapse" id="mainMenu">
            <div class="navbar-nav ml-auto " style="width:100%">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Training</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </div>
    </div>
Ahmad.Iftikhar
Jawaban edit 17 September 2017 в 7:03
Komentar (1)