我試圖讓三個等寬(日期選擇器輸入組,一個下拉和一個按鈕)在一個窗體的中心粘在一起,直到它變得太小,然後我希望他們堆疊在屏幕中央。與自舉輸入組在左側響應對齊
我使用引導我的導航欄,所以我把它列和左文/右文本等,但這些類樣式射門輸入組似乎免疫:
<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上玩了很久,可能會很近。此更新顯示了這些更改:[link] http://jsfiddle.net/qfv3s0nb/6/儘管如此,仍然需要中心項目靠近寬屏幕上的兩個邊項目。任何想法如何應對? – Samene