Tại sao phân vùng đầu vào bootstrap và phân chia nhóm đầu vào-addon?

Question

Tôi có một nhóm đầu vào trong một div ngang hình thức, và nó trông tuyệt vời trên một màn hình lớn. Nó cũng có vẻ tuyệt vời trong bootply, nhưng bất cứ khi nào tôi bắt đầu thay đổi kích thước màn hình biểu mẫu kết thúc tốt đẹp, (đó là ok) nhưng phân chia đầu vào-nhóm-addon hoặc tách khỏi nhóm đầu vào. Tôi đã thử rất nhiều sự kết hợp của css và phong cách.

Làm cách nào để ngăn chặn hành vi này?

Trên màn hình lớn:

trên màn hình nhỏ: 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 cung cấp với .col-xs-, .col-md-, .col-lg- liên quan đến kích thước hiển thị của thiết bị vẽ với

Thay thế class="col-md- bằng các class="col-xs- trong bạn mã HTML và có một thử

Good day

Answer 2

này:

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

là sai. Một cột không thể là một con của một cột. Bạn cần một lớp row giữa chúng:

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

Answer 3

tôi đã có một vấn đề tương tự, tôi đã thay đổi col-md để -xs nhưng nó vẫn không giúp đỡ. Đây là thecode:

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

Và vấn đề đã được giải quyết với thiết thứ hai col-xs đến 5, trước khi nó được 10 tuổi, vào ngày 6 nó cũng cho phép chua nhưng ít hơn về giá trị cao hơn, nó thay đổi kích thước, nhưng không không chia.

Answer 4

Nếu bạn đang mã hóa trong Visual Studio, khi tạo dự án mới, có tệp css giới hạn độ rộng kiểm soát .form thành 300px. Bình luận khối này và nó sẽ làm việc ok.