我试图使宽度相等的三个项目(datepicker输入组,一个下拉菜单和一个按钮)在窗体的中央粘在一起,直到它变得太小,然后让它们堆叠在屏幕的中央。
我为我的导航栏使用了引导程序,因此我使用列和左文本/右文本等给了它一个镜头,但是输入组似乎不受这些类样式的影响:
<div class="container" style="background-color: #ddd;">
<form method="GET" target="_blank">
<div class="row">
<div class="col-sm-5 text-right"
style=" background-color: #000;
align: 0 auto;">
<div class="input-group " style="width: 216px; margin: 14px 8px 14px 8px;">
<input class="form-control date-picker"
type="text" placeholder="Pick a Date"
style="height: 40px; ">
</input>
<label for="Start-Date" class="input-group-addon btn date-picker"
style="min-width: 16px; height: 40px; ">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
</div>
<div class="col-sm-4 text-center" style="background-color: blue">
<select class="btn btn-default dropdown-toggle "
data-toggle="dropdown"
style="height: 40px; margin: 14px 8px 14px 8px; ">
<option value="0">Places</option>
<option>Select Date First</option>
</select>
</div>
<div class="col-sm-3 text-left" style="background-color: red">
<button class=" btn btn-default " value="Claim"
style="height: 40px; padding-right: 12px;
margin: 14px 8px 14px 8px; ">
Claim
</button>
</div>
</div>
</form>
</div>
(也在此处:http://jsfiddle.net/qfv3s0nb/)
如何使div停留在同一行?
最佳答案
我已经编辑了jsfiddle,并为每列添加了宽度和float:left
,以便div不会下降。
这里:http://jsfiddle.net/qfv3s0nb/2/
关于html - 与左侧的 bootstrap 输入组进行响应式对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26968238/