Bootstrap 3: Comment la forme de groupes destinés à être utilisés à l'intérieur des colonnes?

Je suis en utilisant Bootstrap 3, et j'ai un assez standard de mise en page: une large colonne de gauche (.col-md-8), contenant du texte brut, et une plus étroite de la colonne sur la droite (.col-md-4), contenant un formulaire.

Chacun des champs de formulaire, à son tour, est enveloppé dans un .form-group.

Dans ma première tentative, le .form-groups versaient sur les bords gauche et droit de la colonne contenant. (Assurez-vous que le JSFiddle aperçu d'image est au moins aussi large que le Bootstrap de sm le point d'arrêt.) J'ai ajouté un fond rose div pour afficher la boîte que le .form-groups devrait être rester à l'intérieur.

Dans ma deuxième tentative, j'ai ajouté un .container à l'intérieur de la .col-md-4, puis enveloppé chaque .form-group à l'intérieur d'un .row et un .col-md-4.

Cela fait l'affaire, mais...est-ce le bon et de manière préférée? Il semble que beaucoup d'extra, standard de balisage pour accomplir quelque chose qui devrait juste un phénomène naturel.

Le Bootstrap docs sont très bonnes, mais elles dissimulent une partie de la "grande image" des trucs comme ça. Peut-être que ce genre de choses est évident pour les gens qui connaissent déjà le responsive CSS, mais il peut être assez déroutant pour un débutant comme moi.

Voici le code de ma première tentative:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
  <div class="container">

    <h1>Broken version</h1>
    <h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>

    <div class="row">

        <div class="col-md-8">

            <div style="background-color: orange;">
                <p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
            </div>

        </div> <!-- .col-md-8 -->

        <div class="col-md-4">

            <div style="background-color: pink;">

                <form role="form" class="form-horizontal">

                    <div class="form-group">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" type="email" name="email" id="email">                    
                    </div>

                    <button type="submit">Submit</button>

                </form>

            </div> <!-- pink background div -->

        </div> <!-- .col-md-4 -->

    </div> <!-- .row -->

</div> <!-- .container -->

</body>

</html>

Et voici le code de mon deuxième, corrigé éventuellement tentative:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
  <div class="container">

    <h1>Corrected (?) version</h1>
    <h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>

    <div class="row">

        <div class="col-md-8">

            <div style="background-color: orange;">
                <p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
            </div>

        </div> <!-- .col-md-8 -->

        <div class="col-md-4">

            <div style="background-color: pink;">

                <div class="container">

                    <form role="form" class="form-horizontal">

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="control-label" for="name">Name</label>
                                <input class="form-control" type="text" name="name" id="name">                    
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="control-label" for="email">Email</label>
                                <input class="form-control" type="email" name="email" id="email">                    
                            </div>
                        </div>

                        <button type="submit">Submit</button>

                    </form>

                </div> <!-- .container -->

            </div> <!-- .pink background div -->

        </div> <!-- .col-md-4 -->

    </div> <!-- .row -->

</div> <!-- .container -->

</body>

</html>
Vous n'êtes pas obligé d'utiliser .forme horizontale, donc n'est pas parce que ce n'est pas un .forme horizontale de la situation. Regarder les docs .form-horizontal exemples, ce n'est pas là où vous l'utilisation de cette classe. Utilisez pas de classe de votre forme et de voir que vous n'avez pas besoin .récipient pour mettre à zéro la marge négative sur l' .formulaire-groupe
Vous pouvez utiliser .formulaire-groupe au lieu de .ligne si vous voulez un peu de marge inférieure.

OriginalL'auteur greenie2600 | 2014-10-10

  1. 14

    Les deux réponses précédentes manque de lecture du fichier d'amorce docs.

    Vous n'êtes pas obligé d'utiliser .form-horizontal afin de ne pas parce que ce n'est pas un .form-horizontal situation. Regarder les docs pour .form-horizontal exemples, ce n'est pas là où vous l'utilisation de cette classe. Utilisez pas de classe de votre formulaire, puis vous n'avez pas besoin .récipient pour mettre à zéro la marge négative sur la .form-group.

    http://jsfiddle.net/fr6p90ar/6/

    Même que la vôtre sans .form-horizontal et sans imbriqués .conteneur (lire la doc).

    également ceci:

    <div class="form-group col-md-4">

    est comme mettre une colonne de classe .ligne, il va gâcher les choses de manière significative.

    Suffit d'utiliser: 

    <div class="form-group">
    votre version indique encore le texte des entrées dépassant de la zone rose si vous redimensionnez la fenêtre juste à droite ...
    Oui, c'est le mauvais lien: jsfiddle.net/fr6p90ar/6 Son exemple eu la très mauvaise.
    Une fois de plus: jsfiddle.net/fr6p90ar/6
    Bah; les étrangers .form-horizontal était mon problème. Ne peux pas croire que j'ai manqué. Il n'était pas question de ne pas avoir lu les docs, c'était juste une erreur stupide que je n'ai pas d'avis. Désolé, j'ai travaillé quelques très longues heures ces derniers temps. Concernant la .form-group.col-md-4 question: merci pour les précisions, mais encore une fois, je lire la documentation. Je suis content que ce point est évident à partir de la documentation, mais ce n'est pas pour moi - je suis en train d'apprendre le Bootstrap et le responsive design, pour la première fois dans des conditions extrêmes de pression de temps. Merci pour l'aide, si!
    Tout le monde fait, mais vous ferez moins quand vous vous rendez compte que 99,99% des problèmes sont de simples erreurs ET de vous apprendre à tiret, de commentaires, et de garder vraiment propre code. Point à temps sauve neuf et tout ça. col-X-4 est 33.333% partout où il va et il ajoute toujours de la gouttière. Vous n'avez pas besoin de n'importe quelle colonne de classes lorsque quelque chose est en pleine largeur, imbriquée à l'intérieur de quelque part ou pas. Même col-X-12, il est rarement nécessaire.

    OriginalL'auteur Christina

  2. 1

    Cela devrait aider (à partir du bootstrap doc: http://getbootstrap.com/css/#forms-horizontal

    Utiliser Bootstrap prédéfinis classes de grille pour aligner les étiquettes et les groupes de
    les contrôles de formulaire dans une mise en page horizontale par l'ajout d' .form-horizontal à l'
    forme. Faire des changements .forme des groupes se comportent comme des lignes de la grille, donc pas besoin
    pour .ligne.

    si l'on considère cela, vous pouvez nettoyer votre html très peu - et vous pouvez également retirer le récipient. Voici un violon à un peu plus propre version de votre formulaire: http://jsfiddle.net/fr6p90ar/2/

    <div class="col-md-4"  style="background-color: pink;">

                    <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label" for="name">Name</label>
                                <input class="form-control" type="text" name="name" id="name"/>                    

                        </div>


                            <div class="form-group">
                                <label class="control-label" for="email">Email</label>
                                <input class="text form-control" type="email" name="email" id="email"/>                    
                            </div>


                        <button type="submit">Submit</button>

                    </form>

        </div> <!-- .col-md-4 -->
    Un un lien vers la pullquote getbootstrap.com/css/#forms-horizontal
    merci pour le deeplink - permettez-moi de modifier mon post à réfléchir pour ceux qui ne lisent pas les commentaires
    Veuillez lire les docs, c'est un empilées forme, il n'y a aucune classe et aucun besoin de .conteneur, y compris une classe sur le formulaire lui-même.
    je ne prétends pas à l'utilisation de conteneurs - il n'est pas dans ma réponse ...
    Vraiment, il faut juste supprimer la classe sur la forme et ne pas utiliser imbriqués .conteneur et imbriqués .ligne

    OriginalL'auteur Birgit Martinelle