html - filas - rejillas bootstrap 4

Bootstrap 3: cómo maximizar el ancho de entrada dentro de la barra de navegación

Question

Ahora mismo tengo una barra de navegación que se parece a: http://bootply.com/78239

Quiero maximizar el ancho de la entrada de texto "búsqueda", sin crear saltos de línea (es decir, que el enlace "Borrar" será ajustado con el enlace "Acerca de").

Solo tengo experiencia básica con CSS y diseño web. Leí algo sobre trucos de " overflow: hidden ", pero no entiendo cómo usarlo cuando hay más elementos a la derecha del elemento seleccionado.

Gracias

EDITAR:

Una solución parcial puede ser establecer el ancho "manualmente" para cada caso, como en http://bootply.com/78247 :

@media (max-width: 767px) {
  #searchbar > .navbar-form {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form {
    width: 205px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form {
    width: 425px;
  }
}

@media (min-width: 1200px) {
  #searchbar > .navbar-form {
    width: 625px;
  }
}

pero esta solución no funcionará cuando los textos del menú sean "dinámicos" (por ejemplo, contengan "Hola nombre de usuario").

Supongo que no es un gran problema si se supone que hay un límite en el ancho de los textos del menú; es simplemente molesto calcular / probar esos anchos manualmente. Solo tengo curiosidad por saber si hay una forma ordenada de hacerlo automáticamente.

Answer 1

Dos cosas funcionaron para mí aquí. Agregar consultas de medios de Orens, y también agregar una display: inline a ese grupo de formularios de la barra de búsqueda:

<li id="searchbar">
          <form id="search_form" class="navbar-form navbar-left navbar-input-group " role="search">
            <div class="input-group">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">All <span class="caret"></span>
                </button>
              </div>
              <div class="form-group">
                <input name="search_input" type="text" class="form-control typeahead" placeholder="Search for items or shops" autofocus="autofocus">
              </div>
              <span class="input-group-btn">
          <button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
          </button>
          </span>
            </div>
          </form>
        </li>

Con el CSS:

#search_form > .input-group > .form-group {
  display: inline;
}

Answer 2

Para Bootstrap versión 3.2 y superior también debe configurar la display:table; para el input-group y establecer el ancho a 1% para el input-group-addon .

<div style="display:table;" class="input-group">
            <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            <input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
          </div>

Demo Bootstrap versión 3.2+: http://www.bootply.com/t7O3HSGlbc

-

Si permite cambiar la posición de los elementos de su barra de navegación? No entiendo "sin crear saltos de línea (es decir, que el enlace" Limpiar "será ajustado con el enlace" Acerca de ")". Pruebe esto: http://bootply.com/78374 .

Lo que hice:

• Deje caer el flotante a la izquierda del formulario (soltando la barra de navegación-clase izquierda)
• Dele a otros elementos de la barra de navegación un flotador derecho (la clase de la barra de navegación derecha)
• Establecer la visualización del grupo de formularios en línea ( style="display:inline" )
• Cambiar la posición de los elementos (el derecho flota primero)

Pregunta relacionada:

• Expande div al ancho máximo cuando flotan: se establece a la izquierda

html :

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Project</a>
    </div>
    <div class="navbar-collapse collapse" id="searchbar">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="about.html">About</a></li>
        <li id="userPage">
          <a href="#@userpage"><i class="icon-user"></i> My Page</a>
        </li>
        <li><a href="#logout" data-prevent="">Logout</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" title="Start a new search">Clear</a></li>
      </ul>



     <form class="navbar-form">
        <div class="form-group" style="display:inline;">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
          </div>
        </div>
      </form>

    </div><!--/.nav-collapse -->
  </div>
</div>