Bootstrap: Inline Formular mit überschriften

Ich versuche, zu produzieren, eine inline-form bearbeitet werden, innerhalb von Bootstrap. Ich kann nicht scheinen, um Steuerelemente, um das layout bei der Verwendung von fluid Zeilen und ich brauche ein paar überschriften an der Spitze und kann nicht herausfinden, wie es zu line-up Recht.

Habe ich eine Gabel jsfiddle, veranschaulicht die Idee. Wie Sie sehen können die Steuerelemente überschneiden, was nicht großartig ist. Ursprünglich, bevor ein inline-form habe ich versucht, eine Tabelle zu verwenden, aber entdeckt, dass die verschiedenen input-Kontrollen wirklich nicht glücklich.

<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<form id="frmOptions" method="post" class="well form-inline span12">

     <div class="row-fluid">   
        <div id="formLeft" class="span3">
          <div class="control-group">
            <label for="select1" class="control-label">Option 1:</label>
            <div class="controls">
                <select id="select1">
                    <option>Something</option>
                </select>
                    <select id="select1">
                    <option>Something</option>
                </select>
            </div>      
          </div>
        </div>

        <div id="formCenter" class="span3">
          <div class="control-group">
            <label for="select2" class="control-label">Option 2:</label>
            <div class="controls">
                <select id="select2">
                    <option>Something</option>
                </select>
                 <select id="select2">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
        </div>

        <div id="formRight" class="span3">
          <div class="control-group">
            <label for="select3" class="control-label">Option 3:</label>
            <div class="controls">
                <select id="select3">
                    <option>Something</option>
                </select>
                <select id="select3">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
    </div>   

</form>
</div>
</div>

Hat jemand irgendwelche Vorschläge wie man dieses Problem beheben? Ich bin für die Verwendung von bootstrap-Selektoren http://silviomoreto.github.com/bootstrap-select/, wenn nötig, aber ich habe nicht versucht, Sie noch nicht.

Grid-Dimensionierung, Verwenden .span1 zu .span12 für Eingaben mit den gleichen Größen der grid-Spalten. Ihre Spalte ist der span3 mit der span12 für das ist eine falsche Weg, um die Dimensionierung Zeug . twitter.github.com/bootstrap/base-css.html#forms

InformationsquelleAutor Ian | 2013-03-01

twitter-bootstrap

3

Fügen Sie die span12 Klasse zu Ihrem <select> Elemente: http://jsfiddle.net/kaleb/CdNef/244/

Dass Updates, die sich überschneiden. Ich hoffe das ist was du suchst.

InformationsquelleAutor kzh

Können Sie Folgendes tun, um Ihre Felder auswählen, die arrangiert, wie gewünscht :

JSfiddle Demo

 .form-inline select {
 margin-bottom:10px;
 }
 @media (min-width: 768px) and (max-width: 979px) {
#frmOptions select {
     width:100%;
    }
    }
 @media (max-width: 767px) {
#frmOptions select {
     width:100%
    }
   }
 @media (max-width: 480px) {
  #frmOptions select {
     width:100%;
    }
  }

BTW ich der Meinung, Sie hätten das Formular erstellt auf diese Art , könnte helfen, ya später