html - 响应式对齐与左侧的 Bootstrap 输入组

Question

我试图让三个宽度相等的元素(一个日期选择器输入组、一个下拉列表和一个按钮)在表单的中心粘在一起，直到它变得太小，然后我希望它们堆叠，居中屏幕。

我正在为我的导航栏使用 bootstrap，所以我用列和左文本/右文本等给它一个镜头，但输入组似乎不受这些类样式的影响:

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

Answer 1

我已经编辑了 jsfiddle 并为每一列添加了宽度和 float:left，这样 div 就不会下降。这里:http://jsfiddle.net/qfv3s0nb/2/