de-vraag
Viac na
Question

Bootstrap 4 Navbar položky na pravej strane

Práve som prešiel na bootstrap 4 a prepracovanie všetkých mojich html a scss pracovať s ním a nemôžem nájsť, ako dať skupinu navigačných položiek na pravej strane navigačného panela. Toto je môj kód navigačného panela:

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

A toto je snímka obrazovky, ako to vyzerá

tu zadajte popis obrázka

Martin Lindgren
Martin Lindgren
Edited question 25 september 2017 в 3:22
Programovanie
bootstrap-4
This question has 1 odpoveď in English, to read them log in to your account.
Solution / Answer

TL;DR:

Vytvorte ďalší <ul class="navbar-nav ml-auto"> pre položky navigačného panela, ktoré chcete mať vpravo.
ml-auto stiahne váš navbar-nav doprava, zatiaľ čo mr-auto ho stiahne doľava.

Testované na Bootstrap v4.1.3

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
  <style>
    /* 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;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
  <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>
</nav>
<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>
</body>
</html>

Ako môžete vidieť, boli pridané ďalšie pravidlá štylizácie, aby sa zohľadnili niektoré zvláštnosti v okne náhľadu Stackoverflows.
Vo vašom projekte by ste mali byť schopní tieto pravidlá bezpečne ignorovať.

Od verzie 4.0.0 sa zdá, že toto je oficiálny spôsob.

EDIT: Upravil som príspevok tak, aby obsahoval rozbaľovací zoznam umiestnený na pravej strane navigačného panela, ako navrhol @Bruno. Je potrebné, aby jeho atribúty vľavo a vpravo boli invertované. Na začiatok kódu príkladu som pridal ďalší úryvok css.
Upozorňujem, že príklad zobrazuje mobilnú verziu, keď kliknete na tlačidlo Spustiť úryvok kódu. Ak chcete zobraziť verziu pre počítače, musíte kliknúť na tlačidlo Rozšíriť úryvok kódu. 

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

Zahrnutie tejto položky do súboru štýlov by malo byť úspešné.

eyllanesc
eyllanesc
Edited answer 11 august 2018 в 4:56
340

Vo verzii 4 je to jednoduchšie. Stačí do ul vložiť triedu ml-auto takto:

<ul class="nav navbar-nav ml-auto">
Ashley Brown
Ashley Brown
Edited answer 18 október 2017 в 8:00
240

Toto by malo fungovať pre alfa 6. Kľúčom je trieda "mr-auto" na ľavej navigácii, ktorá posunie pravú navigáciu doprava. Musíte tiež pridať navbar-toggleable-md, inak sa bude ukladať do stĺpca namiesto do riadku. Všimnite si, že som nepridal zvyšné položky prepínania (napr. tlačidlo prepínania), pridal som len toľko, aby sa to naformátovalo podľa požiadavky. Tu sú kompletnejšie príklady https://v4-alpha.getbootstrap.com/examples/navbars/.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <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>
    </nav>
</body>
davidkonrad
davidkonrad
Edited answer 20 jún 2017 в 10:56
40