Barra de Navegación (NAVBAR) al 100%

julia2021 · #1 (**permalink**) 12/01/2015, 23:15

Hola amigos mios, estoy trabajando con bootstrap 3, y configure mi barra de navegacion (NAVBAR) de manera correcta, sin embargo quiero hacer que dicha barra ocupe el 100% de mi container, pero no lo logro hacer, lo más parecido que he logrado es alinear la navbar a la derecha o izquierda con la clase navbar-right y navbar-left.

Mi código es el típico de bootstrap:

Código HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container"> .......

ALGUIEN SABRÁ CÓMO HACER PARA QUE OCUPE EL 100% DEL ANCHO DE MI PANTALA ???.

Gracias un montón a quien me pueda ayudar. Besos

martinmiranda90 · #2 (**permalink**) 13/01/2015, 05:44

Hola!. Puedes poned el código anterior?. Como tienes establecido el container principal?. Un saludo

julia2021 · #3 (**permalink**) 13/01/2015, 08:24

Claro que si, aquí tienes el código:

Código HTML:

Ver original<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">INICIO <span class="sr-only">(current)</span></a></li>
        <li><a href="#">QUIENES SOMOS</a></li>
        <li><a href="#">PRODUCTOS</a></li>
        <li><a href="#">CONTACTENOS</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

gartzia6 · #4 (**permalink**) 13/01/2015, 08:42

Te as mirado el Grid System de Bootstrap?

Poniendo la clase .col-xs-12 se supone que te coje todo el ancho de la pantalla. Prueba y comentas.

martinmiranda90 · #5 (**permalink**) 13/01/2015, 09:20

Suponiendo que tienes toda la página metida dentreo de un container principal,ya sea con la clase container o container-fluid, lo que puedes hacer es poner fuera el menu y asi debería cogerte todo el ancho de la página:

Código HTML:

Código HTML:

<nav class="navbar navbar-inverse">
    <a class="navbar-brand" href="#">Title</a>
       <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
        </ul>
</nav>
<div class="container-fluid">
   ..
</div>

Yo creo que asi deberia funcionarte. Un saludo!

julia2021 · #6 (**permalink**) 13/01/2015, 10:27

Hola amigos, les cuento que lo probe como Uds. me dicen y nada. Lo tengo dentro de un container y nada, tambien lo meti en un col-xs-12 y nada. Alquien que me ayude pleaseeeee ;(

martinmiranda90 · #7 (**permalink**) 14/01/2015, 04:26

Pero has probado a dejar la estructura <nav> completamente fuera del container?. Yo lo he probado y me ha funcionado. Un saludo
Fíjate aqui:
[URL]http://jsfiddle.net/tvoj3g8a/[/URL]

julia2021 · #8 (**permalink**) 14/01/2015, 09:10

Hola martinmiranda90, te entiendo, pero fijate mi intención es que las opciones del menu ocupen el 100% del ancho, es decir, toma el ejemplo que me acabas de enviar y elimina el Form y el navbar-ritght, es decir, deja unicamente las 3 primeras opciones, es decir, "Text", "Link" y "Link" y dime como puedo hacer para que este menú de tres opciopnes te ocupe automaticamente el 100% de la pantalla y no como esta ocurriendo en el ejemplo que se alinean automaticamente a la izquierda.

Gracias, un beso !!!

julia2021 · #9 (**permalink**) 15/01/2015, 21:34

Alguien puede ayudarme !!!!! :(