Wie man die Größe der Eingabe in .input-Gruppe mit .input-group-addon (Bootstrap3) steuern?

Question

A haben eine Form in einer Tabelle, und alle meine Feldgrößen passen gut. Aber ich habe ein Datefield, das ein .input-group-addon hat, das die Größenkontrolle nicht sehr gut funktioniert. Gibt es eine Möglichkeit, es zu beheben?

Ich habe versucht, einige Möglichkeiten, um einen kleineren Eingang, aber das Addon gestoppt angebracht ist: http://jsfiddle.net/93MpC/1/

Der Code von Fiddle:

<div class="table-responsive"> 
<table class="table table-bordered"> 
    <tr class="form-group"> 
    <td><label class="field-label required-field">Name:</label></td> 
    <td><div class="input-group"> 
     <input type="text" name="name" required id="id_name" class="form-control"> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"> 
     <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"><div class="row"> 
     <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
     <td><label class="field-label">Birthdate:</label></td> 
     <td><div class="input-group"> 
     <div class="row"> 
      <div class="col-lg-3"> 
      <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
      <div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
      </div> 
      </div> 
     </div></td> 
    </tr> 
</table> 
</div> 

Vielen Dank im Voraus!

Answer 1

Das richtige HTML für diese Anforderung res eine andere Ebene der Verschachtelung. Weitere Informationen finden Sie in der Dokumentation input groups.

Die <td> mit Ihrem Größe Eingang und Addon soll wie folgt aussehen:

<td class="row"> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</td> 

Die .col-* Klassen Polsterung links und rechts hinzufügen, so dass, wenn ein Problem Sie es mit einem wenig CSS entfernen können.

Answer 2

Entnommen aus Ihrem Code, habe ich eine Klasse zur Hälfte hinzugefügt. Hier ist die CSS:

.half { 
    width: 50%; 
} 

Und der HTML (fast identisch):

<div class="input-group half"><!-- here is .half --> 
    <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

bearbeiten Oder wenn Sie col hier ist eine andere Option verwenden möchten:

<div class="row"> 
    <div class="col-md-3"> 
    <div class="row"> 
     <div class="col-md-3">Birthdate:</div> 
     <div class="col-md-9"> 
     <div class="input-group"> 
      <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
      <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Example