¿Cómo quitar espacios en Bootstrap?

publicado por: Anonymous

Estoy comenzando con algo de diseño web pero me he encontrado con este problema que llevo un buen rato intentando quitarlo. Me gustaría eliminar el espacio que está entre el logo de la página y el link de Inicio:

introducir la descripción de la imagen aquí

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <ul class="nav navbar-header">
                <a href="index.jsp"><img src="images/LOGO.png" width="15%"/></a>
            </ul>
            <ul class="nav navbar-nav">
                <li class="col-xl-3"><a href="index.jsp">Inicio</a></li>
                <li class="col-xl-3"><a href="login.jsp">Entrar</a></li>
            </ul>
        </div>
    </nav>
</body>

Uso las definiciones por defecto de Bootstrap 3, no he modificado nada.

solución

Las clases para columnas son .col-xs- para dispositivos muy pequeños , .col-sm- dispositivos pequeños , .col-md- dispositivos medianos y .col-lg- dispositivos grades.

Quizá la clase que desea hacer referencia es a col-xs en lugar de col-xl , además tener cuidado con ese width de 15% es lo que ocasiona que el primer enlace se separe tanto , además le hacen falta unos detalles para el modo responsive como el menú collapse (posible resultado final)

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.jsp"><img src="images/LOGO.png" width="80"/></a>
    </div>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="nav navbar-nav">
          <li ><a href="index.jsp">Inicio</a></li>
          <li ><a href="login.jsp">Entrar</a></li>
      </ul>
    </div>
  </div>
</nav>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *