1

¿Cómo puedo hacer para que la barra de navegación se mantenga siempre en 12 columnas con Bootstrap? Sé que debo utilizar <div class="row"> y <div class="col-*-*">.

Pero el problema es que hay demasiadas etiquetas <div> y no sé bien dónde colocar las ya mencionadas etiquetas.

Lo que me ocurre cuando achico el navegador:

introducir la descripción de la imagen aquí

Lo que deseo al achicar el navegador:

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Case</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">LoveMatch<span class="glyphicon glyphicon-heart" style="color:red"></span></a>
      </div>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
      </div>
    </nav>
  </body>
</html>

2 respuestas 2

0

Aquí dentro irá todo tu código.

Funciona igual, con Bootstrap siempre tendrás como máximo 12 columnas, sin importar nada, no hay manera de que las sobrepases.

Cuando tienes un div dentro de otro, se obtendrán las 12 columnas del div padre:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <p>Este es el div padre.</p>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <p>Este es el div hijo, y tomará las 12 columnas de referencia al div padre.</p>
  </div>
</div>

1
  • 1
    Hola Alejo... por favor, no muestres tus informaciones personales en las respuestas... el 18 ene. 2017 a las 21:55
0

para mencionar que vas a usar las 12 columnas es

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12>
</div>

Con eso haces que sin importar el tamaño de la pantalla siempre sea de 12

Aquí puedes encontrar un poco mas de información de los "cols"

Tu Respuesta

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

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