Question

我正在尝试排列一个输入字段，使其跨越列，减去其标签的宽度。也就是说，在大屏幕上，标签的宽度约为150px，其余部分占据了整个区域。在中等屏幕上发生同样的事情：标签大约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>

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

Answer 1

当您使用.form-horizontal时，您需要为.col元素指定<label>以及根据引导程序为.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>
	<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>

注意：根据屏幕分辨率的大小，此片段可能不会在此处左侧呈现标签。将代码段展开到全屏以查看正确的实现。

bootstrap标签和控制内联 - 最大宽度

1 个答案: