bootstrap標籤和控制內聯 - 最大寬度

我想安排一個輸入字段，以便跨越其列的列，減去其標籤的寬度。即在大屏幕上，標籤大約150px寬，並且該領域佔據了其餘部分。在中等屏幕同樣的事情發生了：標籤是150寬領域佔據了剩下的，因此：bootstrap標籤和控制內聯 - 最大寬度

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

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

我的形式至今：

<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>

我似乎無法找到正確的組合來做到這一點。

來源

2017-07-11 DaveC426913

對於您嘗試在此處實現的設計類型，您可能會受益於'.form-inline'上的'.form-horizontal' - 請參閱：http://getbootstrap.com/css/#forms-horizontal –

是。我試過了。更新開幕文章。 – DaveC426913

當您使用.form-horizontal你需要爲<label>元素指定.col以及一個.col包裝的<input>按照引導程序文件（V3）的水平形式

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>

注意：片段可能不會呈現標籤在這裏左邊，取決於你的屏幕分辨率的大小。將片段展開至全屏以查看正確的實施。

來源

2017-07-11 21:02:11

bootstrap標籤和控制內聯 - 最大寬度

回答

相關問題