Bootstrap forme horizontale: aligner les deux entrées uns à côté des autres

Je suis à essayer de comprendre comment aligner deux entrées (zip et de la ville) parallèles côte à côte dans le Bootstrap à l'aide de form-horizontal. J'ai essayé d'utiliser le div.row wrapper avec spanX classes combinées avec input-block-level.

Sinon, j'ai essayé de laisser le div.row mais en donnant les entrées, l' spanX classes directement.

Le problème, c'est que la largeur des entrées diffère. Peut-être que c'est un bug, mais à une certaine fenêtre d'affichage (nécessite bootstrap-responsive.css), il fonctionne correctement, mais pas avec une grande fenêtre d'affichage et parfois les barres de défilement horizontale apparaît.

Ne devrait pas rhe sensible de la feuille de style de Bootstrap adapter les tailles? Habillage de l'ensemble du code dans un div.container le rend encore pire.

Peut-être vous pouvez même me montrer les différentes solutions?

J'ai préparé un jsFiddle et quelques captures d'écran pour vous. Vous pouvez trouver la taille de la fenêtre et la taille de la fenêtre d'affichage (entre crochets) dans le titre. Cliquez sur les images pour agrandir.

OriginalL'auteur Jan | 2013-04-13

1

Vous devez vous rappeler que spanX classes sont mises en œuvre avec des pourcentages, donc parfois les bords ne seront pas alignées correctement lors de la mise en de multiples zones de saisie dans la même ligne. Ainsi, lorsque vous utilisez un span12 de classe, les membres de l' div pourrait warped.

Les étiquettes sont un autre sujet de préoccupation dans ce multiple entrée par la ligne de scénario. Ils prennent 160px, de sorte qu'ils ne sont pas compatibles avec span12 zones de saisie. Ils sont les meilleurs pour une entrée par ligne et span1-span10.
```
<form class="container-fluid">
    <div class="control-group">

        <div class="controls row-fluid">
            <input type="text" class="span11" placeholder="Street" />
        </div>

        <div class="controls controls-row row-fluid">
            <input type="text" class="span4" placeholder="Zip" />
            <input type="text" class="span7" placeholder="City" />
        </div>
    </div>
</form>
```
J'ai ajouté deux autres classes de votre 2e rangée, controls-row et row-fluid - première aligne les lignes ensemble, tandis que l'autre fait de la longueur de liquide.

Une meilleure conception de la décision sera de se débarrasser des étiquettes - les espaces déjà faire leur travail - en cas de pluralité de zones de saisie sur la même ligne. De cette façon, vous pouvez utiliser l'ensemble de 11 colonnes.

La barre de défilement horizontale apparaît parfois en raison de l'12 structure de colonne, donc se débarrasser de lui par le paramètre "overflow-x:hidden" droit sur l'élément body.

OriginalL'auteur banjoSas
0

Car quel style vous êtes en train de changer de travail uniquement pour les mobiles, les appareils à écran. Si vous utilisez le code ci-dessus;
```
.input-block-level{
    width:60%;

}
```
vous ne trouverez que les zip et pays entrées aligné uniquement sur mobile viewport exemple-320px/480px et au-dessus ne fonctionnerait pas. Donc, vous devez ajouter un style de ce genre pour en ajouter d'autres mediaqueries aussi comme 768px ou ce que vous voulez.
Votre code fonctionne à tout prix, le style via class de la méthode ou par l'intermédiaire de input[type="text"] méthode, la seule chose qu'ils devraient être dans l'exacte mediaqueries.

.input-block-level est faite pour un 100% de largeur. Et je veux le input avoir cette largeur. C'est triste à dire que votre réponse n'aide pas 🙁

OriginalL'auteur Akshaya Raghuvanshi

Vous devez vous connecter pour publier un commentaire.