Bootstrap-Label und Steuerelement inline - max Breite

Question

Ich versuche, ein Eingabefeld so anordnen, dass es die Spalte überspannt in, minus der Breite seiner Bezeichnung. auf einem großen Bildschirm ist das Etikett etwa 150 Pixel breit und das Feld nimmt den Rest auf. Auf einem Medium Bildschirm geschieht das Gleiche: label etwa 150 breit, Feld nimmt die verbleibende, also:

+---+--------------------------------------------+ 
| n |           | 
| a | Label: [_field___________________________] | 
| v |           | 
| |           | 
+---+--------------------------------------------+ 

+---+--------------------------+ 
| n |       | 
| a | Label: [_field_________] | 
| v |       | 
| |       | 
+---+--------------------------+ 

Meine Form so weit:

<form class="form-horizontal" novalidate> 
    <div class="form-group"> 
     <label class="control-label">{{ 'RequestTimeOff.SearchEmployee' | translate }}</label> 
     <input name="searchQuery" 
       [(ngModel)]="query" 
       class="form-control"> 
    </div> 
</form> 

ich nicht zu finden scheinen, richtige Kombination, um es zu tun.

Answer 1

Wenn Sie .form-horizontal Sie eine .col für das <label> Element sowie eine .col Wrapper für die <input> gemäß der Bootstrap-Dokumentation (v3) für horizontale Formen

http://getbootstrap.com/css/#forms-horizontal

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-horizontal" novalidate> 
 
\t <div class="form-group"> 
 
\t \t <label class="col-sm-2 control-label">Your Label</label> 
 
     <div class="col-sm-10"> 
 
     \t <input name="your-input" placeholder="Your Input" class="form-control"> 
 
\t \t </div> 
 
    </div> 
 
</form>

angeben müssen

Hinweis: Das Snippet rendert das Etikett möglicherweise nicht hier links, abhängig von der Größe Ihrer Bildschirmauflösung. Erweitern Sie das Snippet in den Vollbildmodus, um die korrekte Implementierung anzuzeigen.