Perché i gruppi di moduli hanno un margine negativo in Bootstrap?

Ho questo molto semplice codice utilizzando Bootstrap 3:Perché i gruppi di moduli hanno un margine negativo in Bootstrap?

<html> 
    <body> 
    <main class="container" role="main"> 
     <form class="simple_form form-horizontal"> 
     <div class="form-group text required campaign_url"> 
      <label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label> 
      <textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea> 
     </div>

e sembra in questo modo:

enter image description here

Notate come tho le etichette e gli ingressi non aderiscano a sinistra. Ispezionando quegli elementi ho trovato questo:

.form-horizontal .form-group { 
    margin-left: -15px; 
    margin-right: -15px; 
}

Perché è lì? So che è banale da rimuovere, ma mi chiedo se il modo in cui sto usando Bootstrap sia sbagliato. Come dovrei usarlo?

fonte

2015-04-13 Pablo

Sono pensati per essere utilizzati all'interno di '.row .col- *'. Praticamente tutto il contenuto in un sito di boot dovrebbe essere in un div ".col- *", avvolto con un div ".row" all'interno del div ".container". – Jon

Loro? A cosa ti riferisci esattamente? I gruppi di moduli? Quindi la struttura è .form-horizontal> .col- *> .form-group> .control? Cos'è un gruppo di moduli e cosa raggruppa? Un singolo controllo e la sua etichetta? Un gruppo di controlli correlati come un set di pulsanti radio? – Triynko

Sta succedendo perché si sta usando form-horizontal che deve essere usato come una riga insieme a col-* per il layout. Dalla documentazione Bootstrap: classi griglia predefiniti di

Usa Bootstrap per allineare etichette e gruppi di controlli dei moduli in una disposizione orizzontale aggiungendo .Form-orizzontale alla forma (che non deve essere un). In questo modo, i gruppi di formati vengono modificati come righe della griglia, quindi non è necessario.

Quindi, se si rimuove semplicemente il form-horizontal, il margine negativo scompare.

http://codeply.com/go/QQnqgfKv9v

fonte

2015-04-14 10:56:05 ZimSystem

Quindi, quando si usa .form-horizontal ... vuol dire che si suppone che si aggiunga col- * ai singoli controlli di input e label all'interno del .form-group? Hai detto "la forma orizzontale ... è pensata per essere usata come una riga", ma poi hai detto "aggiungendo .form-orizzontale al modulo ... facendo così cambiare i gruppi di forma per comportarsi come righe della griglia". Quindi qual è? Il modulo dovrebbe essere una riga o il gruppo di moduli dovrebbe essere una riga? Ciò ha implicazioni su dove si suppone che si inseriscano le classi col- *, nel gruppo .form o sui controlli nel gruppo. Molto confuso e contorto. – Triynko

Perché i gruppi di moduli hanno un margine negativo in Bootstrap?

risposta

Problemi correlati