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

我有一个窗体横向div的输入组，它在大屏幕上看起来很棒。它在bootply中看起来也很棒，但是无论何时我开始调整屏幕大小时，表单都会进行换行（可以），但input-group-addon会从输入组中分离或分离。我曾尝试过无数的CSS和样式的组合。为什么bootstrap input-group和input-group-addon分裂？

如何防止此行为？

在大屏幕： 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>

来源

2014-07-24 reckface

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

将class="col-md-替换为在你的HTML代码class="col-xs-，并有尝试

好日子

来源

2014-07-24 14:01:21

col-xs是答案。我现在已经修复了几个有类似问题的地方。谢谢 – reckface

@reckface不客气，美好的一天 –

此：

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

来源

2014-07-25 02:38:48 cvrebert

谢谢，我会在星期一试试 – reckface

我有一个类似的问题，我已经改变了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个解决它也分裂但比上更高的值以下时，改变大小，但会不分裂。

来源

2015-07-23 07:26:44 Hrabia

如果您在Visual Studio中编写代码，当它创建新项目时，会有css文件，它将.form-control宽度限制为300px。评论这个块，它会正常工作。

来源

2017-09-26 11:32:03

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

回答

相关问题