Bootstrap 3 2-spaltiges Formularlayout

Ich lerne immer noch den richtigen Gebrauch von Bootstrap 3 und fragte mich, ob Sie mir alle helfen könnten. Ich möchte ein Layout etwas wie folgt aus:Bootstrap 3 2-spaltiges Formularlayout

Label      Label 
Textbox      Textbox 

Label      Label 
Textbox      Textbox 

Label      Label 
Textbox Textbox    Textarea

Ich weiß, dass, wenn ich die .form-Gruppe verwenden, es wird mir erlauben, das Label über die Oberseite der Textbox zu erreichen. Wie kann ich sicherstellen, dass dies in einer Spalte passiert und dennoch einige Inline-Dinge wie das Beispiel mit den beiden nebeneinander liegenden Textfeldern erlaubt?

Quelle

2014-01-09 Michael Mahony

Wie bereits erwähnt, können Sie das Rastersystem verwenden, um Ihre Eingaben und Beschriftungen beliebig zu gestalten. Der Trick besteht darin, sich daran zu erinnern, dass Sie auch Zeilen in Ihren Spalten verwenden können, um sie in Zwölftel zu zerlegen.

Das folgende Beispiel ist ein möglicher Weg, um Ihr Ziel zu erreichen und wird die beiden Textfelder in der Nähe von Label3 in derselben Zeile platzieren, wenn der Bildschirm klein oder größer ist.

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    </head> 
 
    <body> 
 
    <div class="row"> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label1</label> 
 
      <input class="form-control" type="text"/> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label2</label> 
 
      <input class="form-control" type="text"/> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div class="row"> 
 
       <label class="col-xs-12">Label3</label> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-6"> 
 
        <input class="form-control" type="text"/> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-6"> 
 
        <input class="form-control" type="text"/> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label4</label> 
 
      <input class="form-control" type="text"/> 
 
     </div> 
 
    </div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

http://jsfiddle.net/m3u8bjv0/2/

Quelle

2014-11-26 21:29:29 Mustex

Es gibt kein Formular-Tag in Ihrem Code, aber es ist wichtig, daran zu denken, wenn Sie das Grid-System zum Formatieren von Formularen benutzen, um keine Form-Klassen auf Ihren Formularen wie 'form-horizontal' einzubinden. –

Warum manchmal verwenden Sie Form-Gruppe und einige Zeit nicht ...... irgendeinen Grund? –

Sie könnten das Bootstrap-Grid-System verwenden:

<div class="col-md-6 form-group"> 
    <label for="textbox1">Label1</label> 
    <input class="form-control" id="textbox1" type="text"/> 
</div> 
<div class="col-md-6 form-group"> 
    <label for="textbox2">Label2</label> 
    <input class="form-control" id="textbox2" type="text"/> 
</div> 
<span class="clearfix">

http://getbootstrap.com/css/#grid

Ist das, was Sie erreichen wollen?

Quelle

2014-01-09 22:55:57 Yoann

Nein, ich steckte diese in jsfiddle und bekam einen Stapel von Etiketten und Formularfelder. Sehen Sie es hier http://jsfiddle.net/mikemahony/3jHqH/ –

erweitern Sie das Ergebnisfenster in jfiddle, es wird inline gehen, es reagiert. Wenn Sie keine Reaktion wünschen, verwenden Sie ein einfaches

Layout. – Yoann

Ich habe das Ergebnisfenster in JSFiddle erweitert und Ihr Code reagiert nicht mehr. Ich kann auch aus dem HTML sehen, dass es nicht mit dem obigen Beispiel übereinstimmt. Das obige Beispiel zeigt ein Label und dann unter dem Label ein Textfeld. Sie haben Label, Label, Textfeld, Textfeld. Hole den JSFiddle in meinem letzten Kommentar und du wirst sehen, dass dein Code nur 2 Labels und 2 Textboxen stapelt. Danke, aber –

Bootstrap 3 2-spaltiges Formularlayout

Antwort

Verwandte Themen