kzen.dev
Mai mult
Question

Bootstrap 4 navbar elemente de pe partea dreapta

Am trecut la bootstrap 4 și remaniere toate html și scss să lucreze cu ea și I cant par să găsească modul de a pune un grup de nav-elementele de pe partea dreaptă a barei de navigare. Acest lucru este meu navbar cod:

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

Și aceasta este o captură de ecran de ceea ce pare

introduceți descrierea imaginii aici

Martin Lindgren
Martin Lindgren
Întrebarea editată 25 septembrie 2017 в 3:22
Programare
bootstrap-4
Solution / Answer

TL;DR:

Creați un alt <ul class="navbar-nav ml-auto"> pentru navbar elementele pe care doriți de pe dreapta. ml-auto, se va tragenavbar-navundemr-auto` va trageți-l spre stânga.

Testate împotriva 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>

După cum puteți vedea styling suplimentare reguli au fost adăugate la contul pentru unele ciudățenii în Stackoverflows caseta de previzualizare. Tu ar trebui să fie capabil de a ignora aceste reguli în proiectul dumneavoastră.

Ca de v4.0.0 acest lucru pare a fi oficial cale de a o face.

EDIT: am modificat Postul pentru a include un vertical plasat pe partea dreapta a navbar cum a sugerat de către @Bruno. Ea are nevoie de "stânga" și "dreapta" atributele pentru a fi inversat. Am adăugat un fragment de css la începutul exemplu de cod. Vă rugăm să rețineți, că acest exemplu arată versiunea mobilă atunci când faceți clic pe Run fragmentul de cod de buton. Pentru a vizualiza versiunea desktop trebuie să faceți clic peExtinde fragment de buton. 

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

Inclusiv în acest stil ar trebui să facă truc.

eyllanesc
eyllanesc
Răspuns editat 11 august 2018 в 4:56
340

În versiunea 4, este mai ușor. Doar a pus-o ml-auto clasa ul astfel:

<ul class="nav navbar-nav ml-auto">
Ashley Brown
Ashley Brown
Răspuns editat 18 octombrie 2017 в 8:00
240

Acest lucru ar trebui să lucreze pentru alfa 6. Cheia este de clasa "mr-auto" pe stânga nav, care va împinge chiar nav la dreapta. De asemenea, trebuie să adăugați navbar-toggleable-md sau va stivă într-o coloană în loc de un rând. Notă am n't se adauga restul de elemente de comutare (de exemplu, butonul de comutare), am adăugat doar suficient pentru a ajunge la formatat așa cum a solicitat. Aici sunt mai multe exemple 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
Răspuns editat 20 iunie 2017 в 10:56
40

Navbar extins

Navbar s-a prăbușit

Am un lucru codepen cu stânga și dreapta aliniat nav-link-uri care totul s-a prăbușit într-un meniu receptiv împreună, folosind .justifica-conținut între pe etichetă părinte: https://codepen.io/epan/pen/bREVVW?editors=1000

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar"     aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <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>
</nav>
epan
epan
Răspuns editat 9 iunie 2017 в 12:08
10

În Bootstrap 4 alfa-6 versiune, Ca navbar este folosind flex model, puteți folosi justifica-conținut-endîn părinte&#39;s div și elimina "" domnule-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>

Aceasta funcționează ca un farmec :)

7

Cu Bootstrap v4.0.0-alfa.6: Două <ul>s (.navbar-na), una cu .dl-auto si cel cu .ml-auto:

<nav ...> 
  ...     
  <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>
</nav>
1

În cazul meu, am fost în căutarea pentru o soluție care permite o navbar elemente pentru a fi aliniat la dreapta. În scopul de a face acest lucru, trebuie să adăugați style="width:100%;" în<ul class="navbar-nav"> și *apoi* se adaugăml-auto` clasa a barei de navigare articol.

-1

Aici și ușoară Exemplu.

<!-- Navigation bar-->

<nav class="navbar navbar-toggleable-md bg-info navbar-inverse">
    <div class="container">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
            <span class="navbar-toggler-icon"></span>
            </button>
        <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>
</nav>
Ahmad.Iftikhar
Ahmad.Iftikhar
Răspuns editat 17 septembrie 2017 в 7:03
-1