引导标签和控件内联 - 最大宽度答案

【问题标题】：bootstrap label and control inline - max width引导标签和控件内联 - 最大宽度
【发布时间】：2017-07-12 05:02:11
【问题描述】：

我正在尝试安排一个输入字段，使其跨越其所在的列，减去其标签的宽度。即在大屏幕上，标签的宽度约为 150 像素，其余部分由该字段占据。在中等屏幕上也会发生同样的事情：标签大约是 150 宽，字段占据了剩余的部分，因此：

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

我似乎找不到合适的组合。

【问题讨论】：

对于您在这里尝试实现的设计类型，您可能会从.form-horizontal 中受益而不是.form-inline - 请参阅：getbootstrap.com/css/#forms-horizontal
是的。我试过了。更新了开幕帖。

标签： twitter-bootstrap

【解决方案1】：

当您使用 .form-horizontal 时，您需要根据 Bootstrap 文档 (v3) for Horizontal Forms 为 <label> 元素指定 .col 并为 <input> 指定 .col 包装器

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>
	<div class="form-group">
		<label class="col-sm-2 control-label">Your Label</label>
        <div class="col-sm-10">
        	<input name="your-input" placeholder="Your Input" class="form-control">
		</div>
    </div>
</form>

注意：sn-p 可能不会在此处呈现左侧的标签，具体取决于屏幕分辨率的大小。将 sn-p 展开到全屏以查看正确的实现。

【讨论】：