为什么是引导输入组& input-group-addon拆分？ [英] Why is bootstrap input-group & input-group-addon splitting?

问题描述

我在一个窗体 - 水平div中有一个输入组，它在大屏幕上看起来很不错。它在 bootply 中看起来也不错，但每当我开始调整屏幕大小时，窗体都会换行（这是确定的），但input-group-addon拆分或分离输入组。

I have an input-group in a form-horizontal div, and it looks great on a large screen. It also looks great in bootply, but whenever I start resizing the screen the form wraps, (which is ok) but input-group-addon splits or separates from the input-group. I have tried numerous combinations of css and styling.

如何防止这种行为？

在大屏幕上：

On large screen:

小屏幕：

html：

on small screen: the 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>

推荐答案

col-xs - ， .col-md - ， .col-lg - 对于渲染设备的显示大小

Bootstrap 3 provided with .col-xs-, .col-md-, .col-lg- with respect to the display size of the rendering device

用 class =col-md - c $ c> class =col-xs - 在您的HTML代码中，并尝试

Replace the class="col-md- with the class="col-xs- in you HTML codes and have a try

美好的一天

这篇关于为什么是引导输入组& input-group-addon拆分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！