Bootstrap setzen input-Feld nebeneinander

Arbeiten an radio-Böden, abschicken und Eingabe-Feld. Das Ziel ist, um es wie folgt Aussehen:

Bootstrap setzen input-Feld nebeneinander

Dies ist, wie weit ich kam. Bootply: http://www.bootply.com/126965

Sie sollten beginnen, Lesen Sie ein wenig über bootstraps grid-system -> getbootstrap.com/css/#grid. Für einen start, Sie können nicht erreichen, was Sie wollen, was so überhaupt, wenn Sie Verpackung in jeder form "element" (label+input) in col-md-7 + col-md-2 divs. Und es wird sogar unmöglich, wenn Sie wickeln Sie jeden "element" in einer form-group.
Schau auf meine Antwort 🙂

InformationsquelleAutor user3185936 | 2014-04-03

  1. 1

    Loszuwerden float:left; auf die .form-horizontal.

    Dann wickeln Sie jeden einzelnen .form-group im 

    <div class='row'>
  <div class='col-md-6'>
    ...
  </div>
</div>

    Bootply - Es muss optimiert werden, um es zu bekommen genau, wie Sie es wollen.

    Auch Leid, der text-Einrückung, bootply hat einen schrecklichen job, und ich bin zu faul, um zu beheben.

    Danke, ich werde schauen. Ich habe gerade festgestellt, dass es sieht schrecklich, mit Handy - /smartphone-Vorschau :/ Die Eingabe im Feld sind riesig. Und reichen Böden sind nicht neben einander.
    Das ist, wenn Sie verwenden col-sm-* 🙂 @user3185936
    Hmm! Ich werde versuchen, um zu sehen, ob ich es beheben kann.

    InformationsquelleAutor Albzi

  2. 0

    Könnten Sie Kasse inline-Formulare( wie hier beschrieben: http://getbootstrap.com/css/#forms-inline ) oder vielleicht, wie vorgeschlagen, form-Gruppen und Spalten hier beschrieben: VERSCHOBEN FIDDLE

    UPDATE: Wie bereits in Kommentar - plus-bonus

    <form class="form-inline" role="form">
<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>

    Als solche der inline-Lösung ist nicht wirklich eine erstklassige Lösung - da ist es in nur eine Zeile.

    Machte ich ein Turnschuh für das andere Beispiel: http://jsfiddle.net/pZCUy/2/

    Ich hoffe das klärt die Dinge ein wenig.

    Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
    Oh - ich passe meine Antwort zu enthalten das wesentliche. Vielen Dank für den Zeiger 🙂

    InformationsquelleAutor nwillems

Schreibe einen Kommentar