il modulo di avvio all'interno del layout del pannello sembra errato

Question

Se si dispone di un modulo definito all'interno di un pannello di bootstrap, il layout del gruppo di moduli viene messo in pezzi.

ho colorato modulo rosso in modo che ho potuto vedere dove era;) ecco la jsFiddle: https://jsfiddle.net/DTcHh/

Ho scoperto che se aggiungo

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

al css , Ottengo quindi questo

(ho colorato modulo rosso in modo che ho potuto vedere dove era;))

in modo che appaia come se fosse risolto, ma sembra una terribile hack per me

• è questo è un bug in bootstrap
• Devo solo applicare questo css
• C'è qualcosa di sbagliato nelle mie definizioni di modulo?

grazie

Answer 1

Secondo documenti bootstrap (http://getbootstrap.com/css/#forms-horizontal), la classe form-horizontal rende <form> agire come un .row quindi non c'è bisogno di aggiungere ed avere .col-**-* in da parte di gruppi, etichette e roba. I documenti ti danno un esempio o

Ma si dispone di un .row all'interno di un .row e non .col-**-*. .row ha un margine negativo per eliminare il padding del suo genitore, quindi con come genitore ha 2 margini negativi.

Quindi è un po 'disordinato. Ti suggerisco di rimuovere la tua classe .row e .form-horizontal per ottenere l'aspetto desiderato o aggiungere il margine come hai già fatto.

Here it's a fiddle.

Answer 2

Grazie all'altra risposta per avermi indicato nella giusta direzione. Personalmente mi piace l'opzione di aggiungere una colonna con 12 larghezza che si avvolge attorno agli altri gruppi di moduli.

<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> 

Here's the fiddle