Bootstrap 3.0: Wie werden Text und Eingabe in derselben Zeile angezeigt?

Ich stelle gerade meine Website auf Bootstrap 3.0 um. Ich habe ein Problem mit der Formulareingabe und der Textformatierung. Was in Bootstrap 2 funktioniert hat, funktioniert in Bootstrap 3 nicht.

Wie kann ich vor und nach einer Formulareingabe Text in derselben Zeile abrufen? Ich habe es auf ein Problem mit der Klasse 'form-control' in der Bootstrap 3-Version des Beispiels eingegrenzt.

Wie würde ich vorgehen, um den gesamten Text und die Eingabe in einer Zeile zu erhalten? Ich möchte, dass das Bootstrap 3-Beispiel wie das Bootstrap 2-Beispiel in der jsfiddle aussieht.

JS Geigenbeispiel

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Update: Ich ändere den Code in diesen, der funktioniert, aber jetzt Probleme mit der Ausrichtung hat. Irgendwelche Ideen?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Ich würde jedes Element, das Sie inline haben möchten, in ein separates col-md- * div in Ihrer Zeile einfügen. Oder erzwingen Sie, dass Ihre Elemente inline angezeigt werden. Die Form-Control-Klasse zeigt Block an, da Bootstrap dies für erforderlich hält.

Direkt aus der Dokumentation http://getbootstrap.com/css/#forms-horizontal .

Verwenden Sie die vordefinierten Rasterklassen von Bootstrap, um Beschriftungen und Gruppen von Formularsteuerelementen in einem horizontalen Layout auszurichten, indem Sie .form-horizontalsie dem Formular hinzufügen (das muss kein a sein <form>). Dadurch wird .form-groupsdas Verhalten als Rasterzeilen geändert , sodass dies nicht erforderlich ist .row.

Stichprobe:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Was Sie brauchen, ist die .form-inlineKlasse. Sie müssen jedoch vorsichtig sein. Bei der neuen .form.inlineKlasse müssen Sie die Breite für jedes Steuerelement angeben.

Schauen Sie sich das an

Nichts davon funktionierte für mich, musste .form-control-staticKlasse benutzen .

http://getbootstrap.com/css/#forms-controls-static

Sie können es so machen:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Geige

gib einfach Mutter von div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

es wird sein

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Die Art und Weise, wie ich es gelöst habe, bestand einfach darin, eine Überschreibung für alle meine Textfelder in der Haupt-CSS meiner Site hinzuzufügen, wie folgt:

.form-control {
    display:initial !important;
}

Bitte überprüfen Sie den aktualisierten Code, den wir verwenden müssen

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

Danke mit Grüßen

In Bootstrap 4 für horizontales Element können Sie .rowmit .col-*-*Klassen die Breite Ihrer Beschriftungen und Steuerelemente angeben. siehe diesen Link .

Wenn Sie eine Reihe von Beschriftungen, Formularsteuerelementen und Schaltflächen in einer einzelnen horizontalen Zeile anzeigen möchten, können Sie .form-inlinediesen Link für weitere Informationen verwenden

Oder Sie können dies tun:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

Ich habe jeden der oben genannten Vorschläge ausprobiert und keiner von ihnen hat funktioniert. Ich möchte keine feste Anzahl von Spalten im 12-Spalten-Raster auswählen. Ich möchte die Eingabeaufforderung und die Eingabe direkt danach, und ich möchte, dass sich die Spalten nach Bedarf dehnen.

Ja, ich weiß, das ist gegen Bootstrap. Und Sie sollten NIEMALS einen Tisch benutzen. Weil DIV so viel besser ist als Tabellen. Das Problem ist jedoch, dass Tabellen, Zeilen und Zellen tatsächlich funktionieren.

JA - Ich weiß wirklich, dass es CSS-Fanatiker gibt, und die Knie-Ruck-Reaktion ist, niemals niemals niemals TABELLE, TR und TD zu verwenden. Ja, ich weiß, dass DIV class = "table" mit DIV class = "row" und DIV class = "cell" viel besser ist. Außer wenn es nicht funktioniert und es viele Fälle gibt. Ich glaube nicht, dass Menschen diese Situationen blind ignorieren sollten. Es gibt Zeiten, in denen TABLE / TR / TD einwandfrei funktioniert, und es gibt keinen Grund, einen komplizierteren und fragileren Ansatz zu verwenden, nur weil er als eleganter angesehen wird. Ein Entwickler sollte verstehen, was die Vorteile der verschiedenen Ansätze und die Kompromisse sind, und es gibt keine absolute Regel, dass DIVs besser sind.

"Ein typisches Beispiel: Basierend auf dieser Diskussion habe ich ein paar vorhandene tds und trs in divs konvertiert. 45 Minuten damit herumgespielt und versucht, alles nebeneinander auszurichten, und ich habe aufgegeben. TDs in 10 Sekunden später wieder - funktioniert - sofort - in allen Browsern nichts mehr zu tun. Bitte versuchen Sie mir verständlich zu machen - welche mögliche Rechtfertigung haben Sie dafür, dass ich es anders mache! " Siehe [ https://stackoverflow.com/a/4278073/1758051]

Und das: "

Das Layout sollte einfach sein. Die Tatsache, dass Artikel darüber geschrieben wurden, wie ein dynamisches dreispaltiges Layout mit Kopf- und Fußzeile in CSS erreicht werden kann, zeigt, dass es sich um ein schlechtes Layoutsystem handelt. Natürlich können Sie es zum Laufen bringen, aber es gibt buchstäblich Hunderte von Artikeln online darüber, wie es geht. Es gibt so gut wie keine derartigen Artikel für ein ähnliches Layout mit Tabellen, da dies offensichtlich ist. Unabhängig davon, was Sie gegen Tabellen und zugunsten von CSS sagen, macht diese eine Tatsache alles rückgängig: Ein grundlegendes dreispaltiges Layout in CSS wird häufig als "Der Heilige Gral" bezeichnet. "[ Https://stackoverflow.com/a/4964107/ 1758051]

Ich habe noch keinen Weg gefunden, um DIVs zu zwingen, in allen Situationen immer in einer Spalte aufzustellen. Ich bekomme immer wieder triviale Beispiele gezeigt, die nicht wirklich auf die Probleme stoßen. Bei "Responsive" geht es darum, eine Möglichkeit bereitzustellen, die nicht immer in einer Spalte angezeigt wird. Wenn Sie jedoch wirklich eine Spalte möchten, können Sie Stunden damit verschwenden, DIV zum Laufen zu bringen. Manchmal müssen Sie geeignete Technologie verwenden, egal was die Eiferer sagen.