爲什麼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分裂？

回答

相關問題