bootstrap form-group spacing

Question

Ich möchte einige Abstände zwischen den Steuerelementen haben. Laut Spezifikation sollte es mit Form-Group-Klasse erreicht werden. In meinem Fall funktioniert es jedoch nicht.

http://jsfiddle.net/TLF4L/

<div class="col-xs-12 col-sm-12"> 
    <form role="form"> 
     <div class="form-group"> 
      <div class="col-xs-3 text-right"> 
      <label for="cpTitle">Title</label> 
      </div> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-xs-3 text-right"> 
      <label for="cpDesc">Description</label> 
      </div> 
      <div class="col-xs-9"> 
       <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-xs-3 text-right"> 
       <label for="cpAddr">Program address</label> 
      </div> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" placeholder="Name of Facility" id="cpAddr" /> 
       <input type="text" class="form-control" placeholder="Street 1" /> 
       <input type="text" class="form-control" placeholder="Street 2" /> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" placeholder="State" /> 
       </div> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" placeholder="City" /> 
       </div> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" placeholder="Zip" /> 
       </div> 
      </div> 
     </div> 
    </form> 
</div> 

Answer 1

http://jsfiddle.net/TLF4L/6/

Hauptproblem ist, setzen Sie sicherstellen, dass Klasse „form horizontal“ auf dem Formular. Für die Programmadressfelder könnten Sie entweder eine separate Zeile für jedes Feld erstellen oder ich würde nur ein CSS für den unteren Rand in jedem Eingabefeld hinzufügen. Herausgegeben jsfiddle oben

.margin-bottom { 
margin-bottom:15px;} 



<div class="col-xs-12 col-sm-12"> 
<form role="form" class='form-horizontal'> 
    <div class="form-group"> 
     <div class="col-xs-3 text-right"> 
      <label for="cpTitle">Title</label> 
     </div> 
     <div class="col-xs-9"> 
      <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-xs-3 text-right"> 
      <label for="cpDesc">Description</label> 
     </div> 
     <div class="col-xs-9"> 
      <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-xs-3 text-right"> 
      <label for="cpAddr">Program address</label> 
     </div> 
     <div class="col-xs-9"> 
      <input type="text" class="form-control margin-bottom" placeholder="Name of Facility" id="cpAddr" /> 
      <input type="text" class="form-control margin-bottom" placeholder="Street 1" /> 
      <input type="text" class="form-control margin-bottom" placeholder="Street 2" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-xs-3 text-right">&nbsp;</div> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" placeholder="State" /> 
     </div> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" placeholder="City" /> 
     </div> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" placeholder="Zip" /> 
     </div> 
    </div> 
</form> 

Answer 2

ich Ihre Geige aktualisiert, hinzugefügt sowie eine Textarea-Klasse. Aktualisiert fiddle

Sie benötigen CSS verwenden, um eine Marge unten auf Ihre Eingabe zu setzen Felder

input[type=text], .txtarea{ 
margin-bottom: 10px; 

}