與自舉輸入組在左側響應對齊

我試圖讓三個等寬（日期選擇器輸入組，一個下拉和一個按鈕）在一個窗體的中心粘在一起，直到它變得太小，然後我希望他們堆疊在屏幕中央。與自舉輸入組在左側響應對齊

我使用引導我的導航欄，所以我把它列和左文/右文本等，但這些類樣式射門輸入組似乎免疫：

<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保持在同一行？

來源

2014-11-17 Samene

我在jsfiddle上玩了很久，可能會很近。此更新顯示了這些更改：[link] http://jsfiddle.net/qfv3s0nb/6/儘管如此，仍然需要中心項目靠近寬屏幕上的兩個邊項目。任何想法如何應對？ – Samene

我編輯了jsfiddle併爲每列添加了寬度和float:left，以便div不會下降。這裏：http://jsfiddle.net/qfv3s0nb/2/

來源

2014-11-17 08:57:48 winresh24

問題不在於div（1）輸入組不會正確對齊（右對齊）和（2）項目並不真正保持在一起，它們只存在於粘在一起的區域。在我的屏幕上div從不包裹，但如果我調整窗口寬度較小，我可以看到你修復了什麼。無論如何，謝謝你看看和調整，但我仍然需要解決主要問題。 – Samene

與自舉輸入組在左側響應對齊

回答

相關問題