Estoy usando Bootstrap para crear una barra de navegación. Cuando miro mi página en una pantalla grande, funciona perfectamente. Sin embargo, cuando intento reducir el tamaño a una pantalla más pequeña, la barra de navegación se vuelve más alta y el ícono y el nombre de la marca en el lado izquierdo y los elementos li en el lado derecho no están en la misma línea. ¿Hay algún problema con mi código html o css que esté causando este problema? Muchas gracias de antemano.

Aquí está mi código HTML:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <!-- Left side -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="index.html">
                <span class="logo"><img src="logo_example.png"/></span>
                <h4 class="navbar-text">My Website</h4>
            </a>
        </div>

        <!-- Right side -->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Sign Up</i></a></li>
                <li><a href="login.html">Login</i></a></li>
            </ul>
        </div>
    </div>
</nav>

Aquí está mi código css

.navbar-brand {
    margin: 0;
    padding: 0;
    width: 1000px;
}


.navbar-brand img {
    max-height: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}

span img {
    float: left;
}

Aquí hay una imagen de lo que estoy hablando.

0
Mayakanai65 16 dic. 2016 a las 00:47

2 respuestas

La mejor respuesta

Le ha dado a .navbar-brand un ancho de 1000px, por lo que ocupa demasiado del ancho de su contenedor en ventanas de visualización más pequeñas (pantallas más pequeñas), sin dejar espacio para sus otros elementos. Tenga en cuenta que la clase .container de Bootstrap responde: tiene un ancho menor en las ventanas gráficas más pequeñas.

Eliminar el atributo width para navbar-brand debería resolver su problema.

0
Jamie Doyle 15 dic. 2016 a las 21:57

Debe eliminar el siguiente CSS:

.navbar-brand {
    width: 1000px;
}

Vea la demostración aquí: http://codepen.io/sol_b/pen/PbxgXo

0
sol 15 dic. 2016 a las 21:59