Es muy fácil en Bootstrap alinear elementos a la izquierda y a la derecha usando las clases de Bootstrap. De forma predeterminada, se establece a la izquierda. Si desea alinear los elementos al centro oa la derecha, lo hará usted mismo. Alinear el logotipo de la barra de navegación a la izquierda de la pantalla con el método Bootstrap es un truco rápido que puede evitar que escribas CSS adicional. En esto, simplemente agregamos otra etiqueta div arriba de la etiqueta div que tiene clase navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> How to Align navbar logo to the left screen using Bootstrap ? </title> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity= "sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity= "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> </script> </head> <body> <!-- NAVBAR STARTING --> <!-- Use navbar class to the navbar logo to the far left of the screen--> <nav class=" navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0 "> <a class="navbar-brand" href="#"> <!-- Add logo with size of 90*80 --> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" width="90" height="80" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-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="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Courses</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por avengerjanus123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA