bootstrap forme à l'intérieur du panneau mise en page semble incorrect

Si j'ai une forme définie à l'intérieur d'un bootstrap panneau, puis le groupe de mise en page s'effondre.

bootstrap forme à l'intérieur du panneau mise en page semble incorrect

J'ai coloré la forme rouge pour que je puisse voir d'où il était 😉 voici le jsFiddle : https://jsfiddle.net/DTcHh/

J'ai constaté que si j'ajoute

.panel-body .form-horizontal .form-group {
    margin-right: 25px;
    margin-left: 25px;
}

pour le css, je puis faire ce

bootstrap forme à l'intérieur du panneau mise en page semble incorrect

(J'ai coloré la forme rouge pour que je puisse voir d'où il était 😉 )

donc il semble que c'est corrigé, mais semble un terrible hack pour moi

  • Est que c'est un bug dans le bootstrap
  • Dois-je appliquer ce css
  • Est-il quelque chose de mal avec mon formulaire de définitions ?

grâce

InformationsquelleAutor jmls | 2015-08-07
  1. 11

    Selon bootstrap docs (http://getbootstrap.com/css/#forms-horizontal), la classe form-horizontal fait <form> agir comme un .row de sorte que vous n'avez pas besoin de l'ajouter et ont .col-**-* dans des groupes, des étiquettes et des trucs. Les docs de vous donner un exemple o

    Mais vous avez un .row à l'intérieur d'un .row et pas de .col-**-*. .row a marge négative pour supprimer le rembourrage de son parent, sans .col-**-* en tant que parent, il dispose de 2 des marges négatives.

    Donc c'est un peu bordélique. Je suggère de retirer votre .row et .form-horizontal classe à atteindre le look que vous voulez ou ajouter la marge, comme vous l'avez déjà fait.

    Ici c'est un violon.

    InformationsquelleAutor Turqueso
  2. 0

    Merci pour la réponse pour me pointer dans la bonne direction. Personnellement, j'aime la possibilité d'ajouter une colonne avec 12 de largeur qui s'enroule autour de l'autre-groupes. 

    <form class="form-horizontal" style="background: red;">
    <div class="col col-xs-12">
      <div class="form-group">
        <label>field 1</label>
        <input class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label>field 2</label>
        <input class="form-control" type="text" />
      </div>
    </div>
  </form>

    Voici le violon

    InformationsquelleAutor John Lee