Twitter Bootstrap 3.0 - centrée sur la zone de recherche
Je travaille dans le Bootstrap 3.0 essayer de faire un Google-recherche de style de boîte qui a une "Aide à la Recherche de" lien après le bouton "Soumettre".
Mon problème: quand je vais sensible je perds mon compenser les marges et le bouton renvoyé à la ligne suivante.
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
<a href="#">Search Help</a>
</form>
</div>
</div>
C. f.: http://jsfiddle.net/redo1134/su3eq/2/
Tout va bien à >991px. Mais à 991 et ci-dessous je perds le décalage.
C'est certainement liée à la #media (min-width: 992px)
requête de média dans le bootstrap.le css, mais je ne sais pas comment garder le décalage.
Et pour empirer les choses: lorsque la fenêtre est <768px le bouton et le lien retour à la ligne.
Encore une fois, je suis attiré par bootstrap.css et le min-width: 768px
requête des médias, mais je ne sais pas comment faire pour garder l'entrée, le bouton et le texte tous ensemble.
Merci!
Bonne question, mais oui, je ne veux qu'il soit réactif. J'aimerais compensations pour les deux plus grandes fenêtres, puis pleine largeur à tous de petites tailles. Le truc juste semble être de garder le lien sur la même ligne que l'entrée+le soumettre.
OriginalL'auteur redo1134 | 2013-08-22
Vous devez vous connecter pour publier un commentaire.
OriginalL'auteur Bass Jobsen
Donc, en utilisant Bootstrap effectuera automatiquement les travées pause pour afficher toutes les largeurs à un certain point d'arrêt... il le fait pour la réactivité! J'ai l'habitude de créer mes propres styles quand je tiens quelque chose d'agir comme je le veux. Ce qui est tout à fait ok!
À l'aide des styles en ligne juste pour un exemple rapide, (vous pouvez les transformer en bon de styles pour votre feuille de style), vous pouvez faire quelque chose comme ceci avec votre zone de recherche... aussi mis à jour le jsfiddle ici
OriginalL'auteur jampafoo
DÉMO:http://jsbin.com/IKaKosoX/1/
EDIT: http://jsbin.com/IKaKosoX/1/edit?html,css,sortie
Supprimer la ligne col enveloppant le formulaire en ligne et de les remplacer par ce code html:
Supprimer les css personnalisé concernant la forme et le remplacer par:
OriginalL'auteur Christina