为什么bootstrap input-group和input-group-addon分裂？

Question

我在一个表格水平div中有一个输入组,它在大屏幕上看起来很棒.它在bootply中看起来也很棒,但每当我开始调整屏幕大小时,表单就会换行(这没关系)但输入组插件会从输入组中分离或分离.我尝试了很多css和样式的组合.

我该如何防止这种行为？

在大屏幕上:

在小屏幕上: html:

<div class="row">
    <div class="form-horizontal">
        <div class="form-group form-group-justified" >
            <label class="control-label col-md-2" for="Start">Start</label>
            <div class="col-md-2">
                <div class="input-group date">
                    <input value="24/07/14" class="form-control" />
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                </div>
                <span class="field-validation-valid text-danger" data-valmsg-for="Start.Date" data-valmsg-replace="true"></span>
            </div>
            <div class="col-md-3">
                <select class="form-control combo" data-val="true" data-val-required="The DaySelection field is required." id="Start_DaySelection" name="Start.DaySelection">
                    <option selected="selected">Full</option>
                    <option>HDBL</option>
                    <option>HDAL</option>
                    <option>Other</option>
                </select>
            </div>

            <div class="col-md-4"  style="display: none;">
                <div class="col-md-6">
                    <input class="form-control" id="Start_From" name="Start.From" placeholder="From" type="text" value="" />
                </div>
                <div class="col-md-6">
                    <input class="form-control" id="Start_To" name="Start.To" placeholder="To" type="text" value="" />
                </div>
            </div>
            <div class="col-md-6">
            </div>

            <span class="field-validation-valid text-danger" data-valmsg-for="Start" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>

Answer 1

自举3设置有.col-xs-，.col-md-，.col-lg-相对于所述再现设备的显示尺寸

更换class="col-md-用class="col-xs-在你的HTML代码，并有一个尝试

美好的一天