Html 为什么引导输入组&；输入组插件拆分？

我有一个水平div格式的输入组，它在大屏幕上看起来很棒。它在中看起来也很不错，但每当我开始调整屏幕大小时，表单都会自动换行（这很好），但输入组插件会拆分或与输入组分离。我尝试了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>

开始
满满的
HDBL
HDAL
其他

与渲染设备的显示大小有关的

.col xs-

、

.col md-

、

.col lg-

提供的引导程序3

将HTML代码中的

class=“col md-

替换为

class=“col xs-

，然后再试一次

你好

这是：

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

---

我有一个类似的问题，我已经将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>

@ChqLabelFor（m=>m.Date，新
{
@class=“col-xs-2控制标签”
})
********
@*K*@
@Html.TextBoxFor（m=>m.Date，新
{
@class=“表单控制”
})

---

通过将第二列X设置为5解决了这个问题，在第二列X为10之前，在6上它也会拆分，但小于更高的值，它会更改大小，但不会拆分。

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

设置“输入组”div的最大宽度为我解决了所有屏幕大小的问题。请参见下面的内联示例：

安全代码
?

谢谢，我会在周一试试这个。答案是X。我现在已经修复了几个有类似问题的区域。谢谢

   <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>

<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>