Beschriftung auf der linken Seite stattdessen über einem Eingabefeld

Ich möchte die Beschriftungen nicht über dem Eingabefeld, sondern auf der linken Seite haben.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Dieser Code gibt mir:

Ich würde gerne haben:

Sie können die Form-Inline-Klasse für jede Formulargruppe verwenden :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Stellen Sie die <label>Außenseite der form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

In der Bootstrap 3-Dokumentation wird dies auf der Registerkarte CSS-Dokumentation im Abschnitt "Benötigt benutzerdefinierte Breiten" beschrieben, in dem Folgendes angegeben ist:

Eingaben, Auswahlen und Textbereiche sind in Bootstrap standardmäßig 100% breit. Um das Inline-Formular zu verwenden, müssen Sie eine Breite für die darin verwendeten Formularsteuerelemente festlegen.

Wenn Sie Ihren Browser und Firebug- oder Chrome-Tools verwenden, um den "width" -Stil zu unterdrücken oder zu reduzieren, sollten Sie sehen, dass die Dinge so ausgerichtet sind, wie Sie es möchten. Natürlich können Sie dann das entsprechende CSS erstellen, um das Problem zu beheben.

Ich finde es jedoch seltsam, dass ich das überhaupt tun muss. Ich konnte nicht anders, als das Gefühl zu haben, dass diese Manipulation sowohl ärgerlich als auch langfristig fehleranfällig war. Letztendlich habe ich eine Dummy-Klasse und einige JS verwendet, um alle meine Inline-Eingaben global zu shimen. Es war eine kleine Anzahl von Fällen, also keine große Sorge.

Trotzdem würde auch ich gerne von jemandem hören, der die "richtige" Lösung hat und mein Shim / Hack eliminieren könnte.

Ich hoffe, dies hilft und wir bitten Sie, allen Personen, die Ihre Anfrage als Bootstrap 3-Problem ignoriert haben, keine Dichtung zu geben.

Sie können ein solches Formular erstellen, bei dem die Beschriftung und die Formularsteuerung auf zwei Arten nebeneinander liegen:

1. Inline-Formularlayout

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Horizontales Formularlayout

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Weitere Informationen und eine Live-Demo finden Sie auf dieser Seite unter http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

So was

DEMO

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Ich hatte das gleiche Problem, hier ist meine Lösung:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

Hier ist die Demo

Sie müssen alle Elemente wie folgt links schweben lassen:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

Geben Sie den gewünschten Elementen einen gewissen Spielraum:

 .form-group { margin-right:5px }

und stellen Sie die Beschriftung auf die gleiche Zeilenhöhe wie die Höhe der Felder ein:

.form-group label { line-height:--px; }

Sie können den vorhandenen Antworten entnehmen, dass die Terminologie von Bootstrap verwirrend ist. Wenn Sie sich die Bootstrap-Dokumentation ansehen, sehen Sie, dass die Klasse form-horizontal tatsächlich für ein Formular mit Feldern untereinander ist, dh was die meisten Leute als vertikales Formular betrachten würden. Die richtige Klasse für ein Formular, das sich über die Seite erstreckt, ist form-inline . Sie haben den Begriff wahrscheinlich inline eingeführt, weil sie den Begriff horizontal bereits missbraucht hatten .

Aus einigen Antworten hier geht hervor, dass einige Leute beide Klassen in einer Form verwenden! Andere denken, dass sie Form-Horizontal benötigen , wenn sie tatsächlich Form-Inline wollen .

Ich schlage vor, dies genau wie in der Bootstrap-Dokumentation beschrieben zu tun:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Welches produziert:

Sie können ein Span-Tag innerhalb des Etiketts verwenden

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Ich konnte mein Problem mit beheben. Scheint gut zu funktionieren und bedeutet, dass ich nicht alle meine Eingaben manuell mit Breiten versehen muss.

.form-inline .form-group input {
 width: auto; 
}

Ich bin sicher, Sie hätten Ihre Antwort bereits gefunden ... hier ist die Lösung, die ich abgeleitet habe.

Das ist mein CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

Und mein HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Sie können das Arbeitsbeispiel hier sehen ... http://jsfiddle.net/s6Ujm/

PS: Ich bin auch ein Anfänger, professionelle Designer ... zögern Sie nicht, Ihre Bewertungen zu teilen.

Ich denke, dies ist genau das, was Sie aus der Bootstrap-Dokumentation "Horizontales Formular" verwenden möchten. Verwenden Sie die vordefinierten Rasterklassen von Bootstrap, um Beschriftungen und Gruppen von Formularsteuerelementen in einem horizontalen Layout auszurichten, indem Sie dem Formular .form-horizontal hinzufügen. Dadurch werden .form-Gruppen in geändert verhalten sich wie Gitterzeilen, daher ist .row nicht erforderlich ". So:

<form class="form-horizontal" role="form">
<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>

Geige: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Auch können wir es einfach als verwenden

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Es scheint, dass das Hinzufügen style="width:inherit;"zu den Eingaben gut funktioniert. jsfiddle Demo

Kein CSS erforderlich. Dies sollte auf Ihrer Seite gut aussehen. Sie können col-md-*nach Ihren Wünschen einstellen

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>