Mehrere Textfelder in einer Zeile in der Bootstrap

Ich bin mit Bootstrap, um zu versuchen und Platz 2 Textfelder neben einem label, die alle auf einer einzigen Zeile, aber ich kann nicht scheinen, um alles zu line-up richtig.

Arbeite ich auf dem Versuch, die "Inländischen" row-arbeiten ersten. Die anderen Reihen genauso Aussehen, wie ich will, Sie zu sehen, aber das auch nur, weil ich betrogen und fügte hinzu, eine Art von "width: 49%" zu Ihnen. Dies zu tun, jedoch bricht die voll responsive Art der Textfelder, die ich behalten will.

Werden Sie feststellen, dass für die "Einheimischen" Zeile, die das label nicht line-up mit den Zeilen darunter, und auch nicht, entweder der Textfelder. Das ist mein code für das "Häusliche" row -

<div class="row">
<div class="form-horizontal">
    <div class="form-group col-md-12 col-xs-12">
        <div class="col-md-4 col-xs-12">
            <label class="control-label">Domestic</label>
        </div>
        <div class="col-md-4 col-xs-12">
            <input id="percentage" class="form-control" type="text" placeholder="Percentage">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
        <div class="col-md-4 col-xs-12">
            <input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
    </div>
</div>

Dinge gehen noch mehr birnenförmig, wenn ich führen Sie die Validierung auf das Formular, und starten Sie die Anzeige diese input-group-addons -

Alle ich bin im wesentlichen zu tun versuchen, ist split die Zeile in Drittel, 1 Drittel für die label -, 1 Drittel für die erste textbox und 1 Drittel für das zweite Textfeld (und dann, wenn das funktioniert, hoffentlich kann ich ihn auf 1 Zeile pro Steuerung auf xs).

Irgendwelche Ideen?

Edit: Wie gewünscht, hier ist mein code für die "Amex" row -

<div class="row">
<div class="form-group col-md-12 col-xs-12">
    <label class="col-md-4 col-xs-12 control-label">Amex</label>
    <div class="input-group col-md-8 col-xs-12 form-inline">
        <div class="input-group" style="width: 49%;">
            <input id="amexPercentage" class="form-control" type="text" placeholder="Percentage">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
        <div class="input-group" style="width: 49%;">
            <input id="amexFlat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
    </div>
</div>

InformationsquelleAutor Paul McLean | 2014-11-27

Form, die Sie erstellen, ist schwierig. Es gibt keine Beispiele in der Dokumentation einer .form-horizontal mit geschachtelten Spalten im inneren die breiteste Spalte. Sie waren verschwunden, der richtige html-Code für die Eingabe-Gruppe zu. Da gibt es eine Menge von Wrappern, es ist gut zum Einrücken von code und Kommentar.

Was Sie tun müssen, ist grid-system im inneren der breitesten Spalte und da wollen Sie zwei 50% - Spalten, die Sie verwenden würden, nur .col-X-6 am Haltepunkt, die Sie wünschen. In diesem Fall möchten Sie die Spalten nebeneinander am col-md-min-Breite, die 992px.

Auch, oft sind die col-X-12-Klasse ist nicht notwendig. Ein element wird 100% Breite unterhalb der letzten Spalte Klasse verwendet. Ein element mit .col-md-4 wird 100% unter, dass Sie nicht haben, um es sagen zu 100%, indem Sie einen zusätzlichen und unnötigen Klasse col-sm-12 col-xs-12

Mehrere Textfelder in einer Zeile in der Bootstrap

Demo: https://jsbin.com/yojoci

CSS
Dies fügt einen vertikalen Abstand, wenn das Formular Stapel unter die min-width der Klasse Wahl.

@media (max-width:991px) { 
    .form-horizontal.custom-form .form-group .row [class*=col-]:first-child {
        margin-bottom: 5px
    }
}

HTML

 <div class="container">
   <form class="form-horizontal custom-form" role="form">

      <div class="form-group">
         <label class="col-sm-2 control-label">Domestic</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text One">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Two">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->


      <div class="form-group">
         <label class="col-sm-2 control-label">Amex</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Three">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Four">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->


      <div class="form-group">
         <label class="col-sm-2 control-label">Premium</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Five">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Six">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->

  </form>
</div>
<!--/.container (DON'T NEST) -->

InformationsquelleAutor Christina

2

Anstatt zu versuchen zu hacken die drei-Spalten-layout zusammen, würde ich den Rahmen schon gebaut, um zu behandeln. Ich empfehle Toast von Dan Eden: https://github.com/daneden/Toast.

Wird es Ihnen helfen, erstellen Sie eine drei-Spalten-layout, die reagieren und nicht zu brechen.

Als er sagte, in den docs, verlinken Sie diese in Ihrem Kopf:
```
<link rel="stylesheet" href="css/toast/grid.css">
```
Dann erstellen Sie Ihr layout mit dem folgenden format:
```
<div class="container">
      <div class="grid">
            <div class="grid__col grid__col--1-of-4">

            </div>
            <div class="grid__col grid__col--3-of-4">

            </div>
            <div class="grid__col grid__col--6-of-12">

            </div>
      </div>
</div>
```
Gibt es mehr spezifische Anweisungen in seiner Beschreibung.

Sieht sehr schön aus. Danke für den Tipp.

InformationsquelleAutor Shaan Singh
1

Stellen Sie sicher, schließen Sie Ihre input-tags korrekt. Derzeit fehlt der schließende tag />. Bitte auch posten Sie Ihre html-für die nächsten zwei Zeilen.
```
<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)" />
```
Vielen Dank für die hinweisen, die fehlenden schließenden tags. Ich aktualisiert meine Frage mit dem code für das "Amex" - Reihe. Die "Premium" - Reihe ist identisch mit der "Amex" - Reihe.

InformationsquelleAutor edita

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.