web-dev-qa-db-fra.com

Bootstrap 3 - Comment maximiser la largeur d'entrée à l'intérieur de la barre de navigation

À l'heure actuelle, j'ai une barre de navigation qui ressemble à: http://bootply.com/78239

Je veux maximiser la largeur de l'entrée de texte "search", sans créer de sauts de ligne (c'est-à-dire que le lien "Effacer" sera serré avec le lien "A propos de").

Je n'ai qu'une expérience de base en CSS et en conception Web. J'ai lu quelque chose sur les astuces "overflow: hidden", mais je ne comprends pas comment l'utiliser quand il y a plus d'éléments à droite de l'élément ciblé.

Merci

MODIFIER:

Une solution partielle peut être de définir la largeur "manuellement" pour chaque cas, comme dans 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;
  }
}

mais cette solution ne fonctionnera pas lorsque les textes du menu sont "dynamiques" (par exemple, contiennent "Hello nom d'utilisateur").

Je suppose que ce n’est pas un gros problème si vous supposez qu’il ya une limite à la largeur des textes du menu - c’est ennuyeux de calculer/tester ces largeurs manuellement . faites-le automatiquement.

htmlcssnavbartwitter-bootstrap-3html-input
21
Oren

Pour les versions 3.2 et supérieures de Bootstrap, vous devez également définir le display:table; pour le input-group et définir la largeur sur 1% pour le 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>

Démo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc

-

Si vous permettez de changer la position de vos éléments de la barre de navigation? Je ne comprends pas "sans créer de sauts de ligne (c'est-à-dire que le lien" Effacer "sera étroit avec le lien" À propos de ")." Essayez ceci: http://bootply.com/78374 .

Ce que j'ai fait:

  • Supprimer le flottant à gauche du formulaire (en supprimant la classe navbar-left)
  • Donne aux autres éléments de la barre de navigation un flottant de droite (classe de la barre de droite)
  • Définir l'affichage du groupe de formulaires sur inline (style="display:inline")
  • Changer la position des éléments (le premier flottant à droite)

Question connexe:

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>
39
Bass Jobsen

Deux choses ont fonctionné pour moi ici. Ajout de requêtes multimédia Orens et ajout d’un display: inline à ce groupe de formulaires de la barre de recherche:

<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>

Avec le css:

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