bootstrap-4 - navegacion - navbar bootstrap ejemplos
Bootstrap 4 elementos de la barra de navegación en el lado derecho (8)
Esta pregunta ya tiene una respuesta aquí:
Simplemente cambié a Bootstrap 4 y volví a trabajar todo mi html y scss para trabajar con él y parece que no puedo encontrar cómo colocar un grupo de elementos de navegación en el lado derecho de la barra de navegación. Este es mi código de barra de navegación:
<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>
Y esta es la captura de pantalla de cómo se ve
Aquí y fácil ejemplo.
<!-- 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>
Con Bootstrap v4.0.0-alpha.6: Dos
<ul>
s (
.navbar-na
), uno con
.mr-auto
y otro con
.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>
En la versión 4, es más fácil.
Simplemente ponga una clase
ml-auto
en el
ul
manera:
<ul class="nav navbar-nav ml-auto">
En la versión Bootstrap 4 alpha-6, como la barra de navegación usa el modelo flexible, puede usar
justify-content-end
en el div de los padres y eliminar
mr-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>
Esto funciona como un encanto :)
En mi caso, estaba buscando una solución que permitiera alinear
uno
de los elementos de la barra de navegación.
Para hacer esto, debe agregar
style="width:100%;"
a la
<ul class="navbar-nav">
y
luego
agregue la clase
ml-auto
a su elemento de la barra de navegación.
Esto debería funcionar para alfa 6. La clave es la clase "mr-auto" en el navegador izquierdo, que empujará el navegador derecho hacia la derecha. También debe agregar navbar-toggleable-md o se apilará en una columna en lugar de una fila. Tenga en cuenta que no agregué los elementos de alternar restantes (por ejemplo, el botón de alternar), agregué lo suficiente para formatearlo según lo solicitado. Aquí hay ejemplos más completos 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>
Tengo un código abierto que funciona con enlaces de navegación alineados a la izquierda y a la derecha que se colapsan en un menú receptivo usando
.justify-content-between
en la etiqueta principal:
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>
TL; DR:
Cree otra
<ul class="navbar-nav ml-auto">
para los elementos de la barra de navegación que desee a la derecha.
ml-auto
arrastrará su
navbar-nav
hacia la derecha, donde
mr-auto
arrastrará hacia la izquierda.
Probado contra 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>
/* 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>
Como puede ver, se han agregado reglas de estilo adicionales para tener en cuenta algunas rarezas en el cuadro de vista previa de s.
Debería poder ignorar con seguridad esas reglas en su proyecto.
A partir de v4.0.0, esta parece ser la forma oficial de hacerlo.
EDITAR:
modifiqué la publicación para incluir un menú desplegable ubicado en el lado derecho de la barra de navegación como lo sugirió @Bruno.
Necesita que se inviertan sus atributos
left
y
right
.
Agregué un fragmento adicional de CSS al comienzo del código de ejemplo.
Tenga en cuenta que el ejemplo muestra la versión móvil cuando hace clic en el botón
Run code snippet
.
Para ver la versión de escritorio, debe hacer clic en el botón
Expand snippet
.
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
Incluir esto en su hoja de estilo debería hacer el truco.