我在项目中使用bootstrap。
该区域的宽度为350px。
我有这个html元素:
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm">
<select class="form-control" ng-model="" ng-options="">
<option value="">- authority-</option>
</select>
</div>
</form>
这是plunker。
如何在一行中创建搜索框和下拉列表。
答案 0 :(得分:1)
答案 1 :(得分:1)
你不需要css来解决这个问题,你可以使用bootstrap样式来实现。
将表格包裹在12个宽的容器(col-lg-12)中,并将每个输入物包裹在6个宽的容器(col-lg-6)中。 (为了简单起见,我在示例中仅使用了桌面大小)
这看起来像是:
<div class="col-lg-12">
<!-- start form -->
<div class="col-lg-6">
<!-- input -->
</div>
<div class="col-lg-6">
<!-- input -->
</div>
<!-- end form -->
</div>
这样,bootstrap将屏幕切成两半(12/2 = 6)并将输入框放在那里。
要使其与您的代码一起使用,请查看此fiddle
注意 我添加了col-lg,col-md,col-sm和col-xs,使它们无论屏幕尺寸如何都显示在同一条线上。
修改强> 要将所有这些放在另一个面板中,请使用:
<div class="panel panel-default">
<div class="panel-body">
<!-- form row -->
</div>
</div>
答案 2 :(得分:0)
<form class="form-inline">
<div class="form-group" >
<input type="text" placeholder="search"/>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<select class="form-group" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</form>
答案 3 :(得分:0)
使用col-xs-6属性
可以轻松地使用bootstrap这是工作代码:
<form class="form-inline">
<div class="col-xs-6">
<div class="input-group input-group-sm" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<select class="form-control" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>
答案 4 :(得分:0)
您可以扩展bootstrap以允许输入组中的select元素。 这取决于您的用例,如果它是直观的,但我认为这可能是一个很好的评估选项。 您基本上复制并粘贴了一些bootstraps样式,以使select元素适合输入组。 如果您可以控制sass,减少文件,那么您可以比我更清洁。
.input-group-select:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-select {
position: relative;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
.input-group-select>select {
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
border-left-width: 0;
}
.input-group-btn:not(:first-child):not(:last-child)>.btn {
border-radius: 0;
border-left-width: 0;
}
.input-group-select:last-child>select {
border-radius: 0 3px 3px 0;
}
.input-group-sm>.input-group-select>select {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
&#13;
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div class="input-group-select">
<select class="select" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>
&#13;
答案 5 :(得分:-1)