de-vraag
  • Otázky
  • Značky
  • Používatelia
Oznámenia
Odmeny
Registrácia
Po registrácii budete informovaní o odpovediach a komentároch na vaše otázky.
Prihlásiť sa
Ak už máte konto, prihláste sa a skontrolujte nové oznámenia.
Za pridané otázky, odpovede a komentáre budú udelené odmeny.
Viac na
Zdroj
Upraviť
 DRing
DRing
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

207 2016-10-21T13:49:16+00:00 3
Martin Lindgren
Martin Lindgren
Edited question 25 september 2017 в 3:22
Programovanie
bootstrap-4
Popular videos
How to Align Navbar Item to the Right in Bootstrap 4
How to Align Navbar Item to the Right in Bootstrap 4
pred 4 rokmi
Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL
Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL
pred 4 rokmi
Responsive Design with Bootstrap by Neel Mehta
Responsive Design with Bootstrap by Neel Mehta
pred 5 rokmi
Bootstrap 4: How to Align Navbar Item to the Right in hindi ||
Bootstrap 4: How to Align Navbar Item to the Right in hindi ||
pred rokom
« Predchádzajúci
Ďalšie »
This question has 1 odpoveď in English, to read them log in to your account.
Solution / Answer
 Busti
Busti
22 október 2016 в 3:33
2016-10-22T15:33:31+00:00
Viac na
Zdroj
Upraviť
#31924502

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
0
Andres Felipe
Andres Felipe
15 marec 2017 в 1:31
2017-03-15T01:31:15+00:00
Viac na
Zdroj
Upraviť
#31924504

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
0
 Matthew
Matthew
20 január 2017 в 5:30
2017-01-20T17:30:18+00:00
Viac na
Zdroj
Upraviť
#31924503

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
0
Pridať otázku
Kategórie
Všetky
Technológia
Kultúra / Rekreácia
Život / Umenie
Veda
Profesionálne
Obchod
Používatelia
Všetky
New
Popular
1
mohidil qodirova
Registered pred 5 hodinami
2
Jasur Fozilov
Registered pred 19 hodinami
3
Zuxriddin Muydinov
Registered pred dňom
4
Денис Анненский
Registered pred 3 dňami
5
365
Registered pred týždňom
BG
DE
EL
ES
FI
FR
ID
IT
JA
LT
LV
NL
PT
RU
SK
TR
ZH
© de-vraag 2022
Zdroj
stackoverflow.com
na základe licencie cc by-sa 3.0 s uvedením autora