Bootstrap 3.3.6 reagierende Form auf kleinem Bildschirm

Question

Ich benutze Twitter Bootstrap 3.3.6. Ich bin neu dazu. Ich habe ein Formular mit folgenden Eingabefeldern entworfen.

<div class="form-group row"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <div class="col-xs-10 col-md-4"> 
     <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
    <label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label> 
    <div class="col-xs-10 col-md-4"> 
     <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
    </div> 

Wenn ich überprüfen Breite von weniger als 768 Second-Label „Adresse 2:“ Firefox Responsive Design-Modus oben mit auf eine neue Zeile umgebrochen, aber es zeigt einen gewissen Spielraum auf der linken Seite. Ich sehe kein Problem, wenn ich die Inspektion mit einem Firefighter überprüfe.

EDIT: Eigentlich möchte ich über 2 Etiketten und Eingänge in der gleichen Zeile für große Bildschirme, sondern auf 2 Zeilen für Bildschirme unter 768px.

Answer 1

Sie müssen diesen Eingang nicht in ein anderes div einfügen. Setzen Sie einfach Ihre Eingabe nach dem Label-Tag und verwenden Sie zwei verschiedene .form-Gruppen für zwei Eingaben. Dein Code sollte so sein.

<div class="form-group"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
</div> 


<div class="form-group"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
</div> 

Wenn Sie ein Inline-Formular vornehmen müssen, kontur Inline-Klasse zu Ihrem <form> Elemente hinzuzufügen.

<form class="form-inline"> 

Mit freundlichen Grüßen!

Answer 2

Ich habe Col-Xs-12 hinzugefügt das Label und auch "Text-Center" -Klasse für eine bessere Positionierung auf klein, aber das liegt an Ihnen.

<div class="form-group row"> 
    <label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label> 
    <div class="col-xs-10 col-md-4"> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
    <label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label> 
    <div class="col-xs-10 col-md-4"> 
     <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
</div>