Question

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

如何防止此行为？

在大屏幕上： large screen

小屏幕上的

： small screen 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

Bootstrap 3与.col-xs-，.col-md-，.col-lg-一起提供，与呈现设备的显示大小有关

将class="col-md-替换为HTML代码中的class="col-xs-并尝试

美好的一天

Answer 2

此：

<div class="col-md-4"  style="display: none;">
    <div class="col-md-6">

错了。列不能是列的子项。你需要一层row：

<div class="col-md-4"  style="display: none;">
    <div class="row">
        <div class="col-md-6">

Answer 3

我有类似的问题，我已将col-md更改为-xs，但它仍然没有帮助。这是代码：

   <div id="collapseGeneral" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div class="form-inline form-group form-group-justified">
                    @Html.ChqLabelFor(m => m.Date, new
                       {
                           @class = "col-xs-2 control-label"
                       })
                    ****<div class="col-xs-5">****
                        <div class='input-group date' id='datetimeFrom'>
                            @*K*@
                        @Html.TextBoxFor(m => m.Date, new
                               {
                                   @class = "form-control"
                               })
                        <span class="input-group-addon clearfix">
                            <span class="glyphicon glyphicon-calendar"> </span>
                        </span>
                    </div>
                </div>
            </div>

问题解决了，第二个col-xs设置为5，在它之前是10，在6它也分裂但小于更高的值，它会改变大小，但不会分裂。

Answer 4

如果您在Visual Studio中进行编码，则在创建新项目时，会有css文件将.form-control width限制为300px。注释这个块，它将正常工作。

Answer 5

设置“ input-group” div的最大宽度对我来说在所有屏幕尺寸上都可以解决。参见下面的内联示例：

<div class="form-group">
        <label for="CCCardCode" class="control-label col-md-3">Security Code</label>
        <div class="col-md-9">
            <div class="input-group" style="max-width:280px;">
                <input class="form-control"/>
                <span class="input-group-addon">?</span>
            </div>
        </div>
    </div>

为什么是bootstrap input-group＆amp; input-group-addon splitting？

5 个答案: