Sağ tarafta Bootstrap 4 navbar öğeleri

Bootstrap 4'e yeni geçtim ve onunla çalışmak için tüm html ve scss'imi yeniden çalışıyorum ve nav çubuğunun sağ tarafına bir grup nav öğesini nasıl koyacağımı bulamıyorum. Bu benim navbar kodum:

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

Ve bu da nasıl göründüğünün ekran görüntüsü

Martin Lindgren
Edited question 2017ösp22ös15 Eylül 2017 в 3:22
Programlama
bootstrap-4
2016ösp49ös13 Ekim 2016 в 1:49
42 görünümler
Çözüm

TL;DR:

Sağ tarafta istediğiniz navbar öğeleri için başka bir <ul class="navbar-nav ml-auto"> oluşturun.
ml-auto`navbar-nav'ınızı sağa çekerken, mr-auto sola çekecektir.

Bootstrap v4.1.3'e karşı test edildi






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

Gördüğünüz gibi, Stackoverflows önizleme kutusundaki bazı tuhaflıkları hesaba katmak için ek stil kuralları eklendi.
Projenizde bu kuralları güvenli bir şekilde göz ardı edebilmelisiniz.

V4.0.0'dan itibaren bunu yapmanın resmi yolu bu gibi görünüyor.

DÜZELTME: @Bruno'nun önerdiği gibi Gönderiyi, gezinme çubuğunun sağ tarafına yerleştirilmiş bir açılır menü içerecek şekilde değiştirdim. Sol ve sağ özelliklerinin ters çevrilmesi gerekiyor. Örnek kodun başına fazladan bir css parçacığı ekledim.
Lütfen, Kod parçacığını çalıştır düğmesine tıkladığınızda örneğin mobil sürümü gösterdiğini unutmayın. Masaüstü sürümünü görüntülemek için Kod parçacığını genişlet düğmesine tıklamanız gerekir. 

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

Bunu stil sayfanıza eklemek işinizi görecektir.

eyllanesc
Edited answer 2018ösp56ös16 Ağustos 2018 в 4:56
Yorumlar (10)

Sürüm 4'te bu daha kolay. Sadece ul içine aşağıdaki gibi bir ml-auto sınıfı koyun:

<ul class="nav navbar-nav ml-auto">
Ashley Brown
Edited answer 2017ösp0ös20 Ekim 2017 в 8:00
Yorumlar (6)

Bu, alpha 6 için çalışmalıdır. Anahtar, sol nav üzerindeki "mr-auto" sınıfıdır, bu da sağ nav'ı sağa itecektir. Ayrıca navbar-toggleable-md eklemeniz gerekir, aksi takdirde bir satır yerine bir sütunda yığılır. Kalan geçiş öğelerini (örneğin geçiş düğmesi) eklemediğimi, sadece istendiği gibi biçimlendirmek için yeterince eklediğimi unutmayın. İşte daha eksiksiz örnekler 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
Edited answer 2017ööp56öö10 Haziran 2017 в 10:56
Yorumlar (1)