与左侧的引导程序输入组进行响应式对齐

Question

我试图使宽度相等的三个项目（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保持同一行？

Answer 1

我已经编辑了jsfiddle并为每个列添加了width和float:left ，以便div不会下降。 此处： http : //jsfiddle.net/qfv3s0nb/2/