"Bootstrap 4" navbar elementai dešinėje pusėje
Aš ką tik perėjo prie bootstrap 4 ir pertvarkyti visus mano html ir scss dirbti su juo, ir aš negaliu atrodo rasti, kaip įdėti nav-items grupę dešinėje navbar pusėje. Tai yra mano navbar kodas:
<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>Ir štai ekrano nuotrauka, kaip ji atrodo
TL;DR:
Sukurkite dar vieną <ul class="navbar-nav ml-auto">, skirtą navigacijos juostos elementams, kuriuos norite matyti dešinėje.
ml-auto ištrauks jūsų navbar-nav į dešinę, o mr-auto - į kairę.
Patikrinta su "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>Kaip matote, pridėtos papildomos stiliaus taisyklės, kad būtų atsižvelgta į kai kuriuos Stackoverflows peržiūros langelio keistumus.
Turėtumėte saugiai ignoruoti šias taisykles savo projekte.
Atrodo, kad nuo 4.0.0 versijos tai yra oficialus būdas.
EDIT: Pakeičiau Pranešimą, kad jame būtų išskleidžiamoji eilutė, esanti dešinėje navbar'o pusėje, kaip pasiūlė @Bruno. Reikia, kad jo atributai left ir right būtų apversti. Pavyzdžio kodo pradžioje pridėjau papildomą css fragmentą.
Atkreipkite dėmesį, kad pavyzdys rodo mobiliąją versiją, kai paspaudžiate mygtuką Run code snippet (paleisti kodo fragmentą). Norėdami peržiūrėti darbalaukio versiją, turite spustelėti mygtuką Išplėsti fragmentą.
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}Įtraukę tai į savo stilių rinkinį, turėtumėte atlikti šį triuką.
4 versijoje tai padaryti lengviau. Tiesiog įdėkite ml-auto klasę į ul taip:
<ul class="nav navbar-nav ml-auto">
Tai turėtų veikti alfa 6. Raktas yra klasė "mr-auto" kairėje nav, kuri stumia dešinę nav į dešinę. Taip pat reikia pridėti navbar-toggleable-md, kitaip jis bus sudėtas į stulpelį, o ne į eilutę. Atkreipkite dėmesį, kad nepridėjau likusių perjungimo elementų (pvz., perjungimo mygtuko), pridėjau tik tiek, kad jis būtų suformatuotas taip, kaip reikalaujama. Čia yra išsamesnių pavyzdžių 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>
