css - español - Twitter bootstrap 3 cómo activar el colapso de la barra de navegación en dispositivos pequeños

input search bootstrap

Question

Estoy usando bootstrap 3.0 y trabajando en un sitio móvil. Estoy tratando de averiguar cómo mostrar y activar la barra de navegación en los dispositivos de tableta (dispositivo pequeño / SM) porque el colapso de la barra de navegación solo funciona en dispositivos pequeños adicionales. No hay ningún problema al utilizar bootstrap 2

Heres mi código

<nav class="navbar navbar-inverse navbar-default-top" role="navigation" style="border:0px; background:#F26522;" align="center">

    <div class="col-lg-3  col-md-3 col-sm-12" style="background-color:#fff; height:192px;" align="center" > 

<div class="hidden-xs hidden-sm"></div><a  href="#"><img src="logo_png.png"   class="img-responsive" ></a></td>
   </div>


    <div class="col-lg-9 col-md-9 col-sm-12"">
      <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-12">
          <button type="button" class="navbar-toggle pull-left hidden-md hidden-lg" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only ">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 

          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-left navr">
              <li class="navrli"><a href="#" id="nav-0">ABOUT</a> </li>

            </ul>
          </div>
        </div>
        <div class="col-lg-1 col-md-1 hidden-sm" align="right">
        </div>
      </div>
    </div>
    <!-- /.navbar-collapse --> 

  <!-- /.container --> 
</nav>

Answer 1

Aquí está la solución para la gente descarada.

@media(max-width:$screen-sm-max) {
 .navbar-header {
    float: none;
}
.navbar-left,.navbar-right {
    float: none !important;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in{
    display:block !important;
}

Answer 2

De forma predeterminada, el punto de interrupción es @screen-sm-min (es decir, ≥768px).

Ver un ejemplo

Personaliza el punto de interrupción de la barra de navegación.

Para personalizar el punto de interrupción de la barra de navegación, cambie la variable menos @grid-float-breakpoint .

De la documentation :

Contenido desbordante

Debido a que Bootstrap no sabe cuánto espacio necesita el contenido de su barra de navegación, es posible que tenga problemas con el ajuste de contenido en una segunda fila. Para resolver esto, puedes:

...

do. Cambie el punto en el que la barra de navegación cambia entre el modo colapsado y el modo horizontal. Personalice la variable @ grid-float-breakpoint o agregue su propia consulta de medios.

Puede utilizar la herramienta de personalización de Bootstrap para crear una versión modificada de Bootstrap. Desde here , puede modificar @grid-float-breakpoint a otro punto de interrupción definido por Bootstrap (es decir, xs , sm , md , lg ) o una cantidad establecida (es decir, 500px ).

Cuando haya terminado, navegue a la sección Download y haga clic en Download

Editar

Su marca funciona como se esperaba, también: http://jsbin.com/kuxah/1/edit?html,output

Answer 3

por qué romper una cuadrícula cuando simplemente la reemplaza con consultas de medios, por ejemplo, en sass

.navbar-toggle{  
    @media(max-width:$screen-sm-max) {
    display: block !important;
  }
}