L'alignement des entrées sur le programme d'installation en utilisant le Système de Grille Fluide
Je suis entrain de créer un formulaire qui oblige l'utilisateur à entrer leur nom et adresse e-mail. La première ligne de la forme dispose de deux entrées côte à côte pour chaque partie du nom et de la 2e ligne a une entrée pour l'adresse e-mail qui doit être de la même largeur que la première ligne de combinés. Je suis en train d'utiliser le système de grille fluide, mais ne peut pas la ligne jusqu'à la 2e rangée avec la première.
<form action="/subscriptions" method="post">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls row-fluid">
<input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
<input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls row-fluid">
<input class="span4" id="email" name="email" type="email">
</div>
</div>
</fieldset>
</form>
http://jsfiddle.net/sguha095/v4amX/
OriginalL'auteur sguha | 2012-10-12
Vous devez vous connecter pour publier un commentaire.
Ont un coup d'oeil a ce jdfiddle: http://jsfiddle.net/kY5LL/18/
J'ai ajouté quelques
div.row-fluid
conteneurs par ligne de votre formulaire et un ensemble supplémentaire de entrées à des fins de démonstration.Espère que c'est ce que vous cherchez.
Je ne pense pas que c'est un problème ici. La dernière version inclut une nouvelle classe
.controls-row
à cet effet. Malheureusement, il ne fonctionne pas dans les dispositions fluides encore (de la version 2.1.1). Mais un correctif #5039 a été ajouté et sera probablement dans la prochaine version. En regardant votre argument de ce point de vue, il semble, que la documentation officielle ne fait faveur de mélange de grilles et formes.Veuillez me corriger si je me trompe.
Vous avez raison que cela ne fonctionne pas pour les dispositions fluides (encore). Quand il fonctionne pour les dispositions fluides je ne l'utilise pas. Cela me rappelle une citation de Jurassic Park, "nous passons tellement de temps à essayer de comprendre si nous le pouvons, que nous cessons de penser que si nous". Une autre façon de voir les choses est de cela, vous pourriez ajouter un pull-gauche et tirez-droite, qui sont les classes utilitaires, sur chaque élément qui a un flotteur. mais c'est juste une mauvaise pratique. Il n'est pas prévu. Parfois, ces classes sont mieux utilisées au cours de prototypage ensuite remplacé avec de "vrais" sémantique code une fois que vous obtenez votre travail de mise en page. Mais à chacun ses goûts
OriginalL'auteur ditscheri
Nous avons d'abord besoin de nettoyer le HTML un peu, il est un supplément de la fermeture de la div sur la première ligne.
J'ai juste ajouté quelques classes à améliorer le style de sorte que vous pourriez voir comment il fonctionne. Le
input-block-level
est une classe de bootstrap mixin pour forcer les entrées d'agir comme de véritables éléments de niveau bloc. C'est nécessaire si vous voulez que ce soit propre et de tirer parti des avantages de la CSS. Si vous voulez faire tout votre style avec HTML, alors vous pouvez le faire avec plus de balisage et moins sémantique méthodes, mais je vous recommande contre elle.Espérons que cette aide!
http://jsfiddle.net/kY5LL/12/
Très simple à faire. Je ne voudrais pas encombrer le formulaire avec les classes de grille, il n'est pas nécessaire. Le formulaire est réactif avec une simple requête de média pour faire les entrées de 100% de la largeur à 480px et ci-dessous. Découvrez le nouveau violon: jsfiddle.net/kY5LL/12 de Cette façon, vous pouvez déposer n'importe où dans la grille.
par la manière, qui doit avoir été une deuxième question sur le plan technique. Ai-je répondre à votre première question correctement?
Vous êtes à la réponse fonctionne bien, mais je voulais vraiment une réponse qui a utilisé le système de grille pour éviter de maintenir mon propre CSS. Désolé je n'ai pas la phrase que clairement dans la question, mais je l'ai mentionné avant l'extrait de code.
Je vois ce que vous dites, mais il se sent comme votre solution est la répétition d'une partie du travail traitées par la grille de mise en page. Par exemple, sur un petit écran (c'est à dire navigateur mobile) la grille fluide, le système permettra de définir chaque entrée sur sa propre ligne, mais avoir cette fonctionnalité dans la solution que vous avez fournis en double css logique (telles que les requêtes de média) inutilement.
OriginalL'auteur