En Bootstrap 4, NavBar es un componente esencial para los menús. Alinear los elementos del menú a la derecha usando la clase float-right funciona bien en Bootstrap 3, pero no funciona en Bootstrap 4 porque la barra de navegación ahora es flexbox. El siguiente enfoque lo explicará claramente.
En Bootstrap 4, NavBar contiene tantos elementos como texto, enlace de texto, deshabilitar el enlace, botones desplegables, formularios, etc. Para alinear texto, vincular texto, deshabilitar enlaces y botones desplegables a la derecha, use class=»text-right». Pero para los formularios, use form class=”flex-row-reverse” para alinear correctamente dentro de NavBar. El uso de propiedades CSS también podría ayudar a alinear correctamente dentro de NavBar si no se necesita la clase predeterminada.
El siguiente ejemplo ilustra cómo configurar elementos de hamburguesa a la derecha en bootstrap 4.
Ejemplo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </h1> <h3>Hamburger items on the right in bootstrap 4</h3> <br> <nav class="navbar navbar-expand-lg navbar-dark justify-content-between text-white" style="background-color: #0074D9;"> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" width="30" height="30" class="d-inline-block align-top" alt=""> GeeksforGeeeks BS4 Navbar </a> <button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNavDropdown01" aria-controls="navbarNavDropdown01" aria-expanded="false" aria-label="Toggle navigation" style="outline-color:white"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse bg-info m-2 p-4" id="navbarNavDropdown01"> <!-- form item of menu for search purpose --> <form class="form-inline flex-row-reverse "> <button class="btn btn-success my-2 my-sm-0 bg-primary" type="submit"> Search </button> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> </form> <!-- Active item text of menu --> <ul class="navbar-nav text-right mr-4"> <li class="nav-item active"> <a class="nav-link" href="#"> Home<span class="sr-only">(current)</span> </a> </li> <!-- inactive link text item of menu --> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <!-- dropdown item of menu --> <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 </a> <!-- dropdown sub items of menu --> <div class="dropdown-menu text-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> Something else here </a> </div> </li> <!-- disable link text item of menu --> <li class="nav-item "> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"> Disabled </a> </li> </ul> </div> </nav> </div> </center> </body> </html>
Producción:
Referencia: https://getbootstrap.com/docs/4.0/components/navbar/
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA