Deshabilitar Bootstrap 3 navbar va 2 filas en tamaño de ventana medio

Por si sirve de algo, aquí hay una idea que hace que los elementos de la barra de navegación se transformen de texto a icono en función del tamaño de respuesta actual.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

El resultado es que el texto 'Contacto' se convierte en un icono más de tamaño pequeño. Aquí hay un ejemplo de bootply

Una solución alternativa que no implica recompilar bootstrap es agregar lo siguiente a su css:

@media (max-width: 950px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

EDITAR sobre cómo funciona esto: esto le indica al navegador que colapse la barra de navegación en un navicon si el medio es más pequeño que algún ancho de píxel. Debe establecer el ancho del píxel adecuadamente para evitar obtener una barra de navegación de 2 líneas. Uso esto para mi barra de navegación de sitio web, que solo necesito para trabajar en chrome/ipad/iphone / samsung mobile. Esto es posiblemente un truco, pero es simple y fácil de probar.

Encontró una forma más sencilla de reducir la barra de navegación tomando pista de otra respuesta publicada en algún lugar, utilizando el espacio en blanco:nowrap. Esto es lo que funcionó bien:

<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-ex1-collapse" style="width:100%;float:none;position:relative;">
        <ul class="nav navbar-pills nav-justified" role="navigation" style="width:auto;white-space: nowrap;">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li> ...
           </ul>
      </div>
</div>

Simplemente puede personalizar los números para diferentes configuraciones en _variables.archivos scss bootstrap. Hay diferentes maneras en que puedes hacer esto dependiendo de la forma en que obtengas la biblioteca de bootstrap.

1. Si lo está obteniendo utilizando la URL de bootstrap, entonces tendría que descargarlo, editarlo e incluirlo en sus activos (porque está personalizando, necesita vincular a bootstrap local)
2. Si está utilizando algún tipo de automatización para ejecutar tareas (por ejemplo, grunt, gulp), todos tienen string replace task en la que simplemente puede editar archivos de biblioteca ejecutando una tarea.

La forma más fácil. Funcionó para mí. Sass way

.navbar-nav>li float: left .navbar-header float: left .navbar-right float: right!important