我试图使宽度相等的三个项目(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/

10-11 12:53