1

Tengo rato tratando de hacer esto para dejar mi cabecera lista y no he podido...

¿Cómo puedo colocar el logo del lado derecho y el navbar del lado izquierdo, respetando exactamente el aspecto visual?

Es decir, invertir las posiciones en que se encuentran cada uno... por favor si me pueden ayudar... aquí coloco el código a ver si lo miran en el navegador y captan la idea... gracias de antemano, de verdad lo agradecería

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>bootstrap 4</title>
  </head>
  <body>

    <!-- NAVIGATION -->

    <nav class=" navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0 "> 

        <a class="navbar-brand" href="#"> 

            <!-- Add logo -->
            <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> 




    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

1 respuesta 1

2

Puedes hacerlo de la siguiente manera, rodea con un div tu logo, el botón de colapso y los enlaces de tu nav. A dicho div ponle las siguientes clases de css "d-flex justify-content-between flex-row-reverse align-items-center flex-wrap", estas clases hacen que el display sea "flex" y puedes separar los elementos a los extremos, también te permite invertir los elementos. Por último, elimina la clase "ml-auto" del tag "ul" ya que esta clase aplica un "margin-left" sobrante del ancho del padre. Ejecuta el siguiente html y deberías de obtener el resultado que quieres, saludos.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />

  <title>bootstrap 4</title>
</head>

<body>
  <!-- NAVIGATION -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0">
    <div class="d-flex justify-content-between flex-row-reverse align-items-center flex-wrap" style="width: 100%">
      <a class="navbar-brand" href="#">
        <!-- Add logo -->
        <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">
          <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>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.