Warum wird Bootstrap-Eingabegruppe und Eingabegruppen-Addon aufgeteilt?

Question

Ich habe eine Eingabegruppe in einer Form-horizontale div, und es sieht gut aus auf einem großen Bildschirm. Es sieht auch gut aus in bootply, aber wenn ich anfange, die Größe des Bildschirms zu ändern, wird das Formular umgebrochen (was in Ordnung ist), aber Input-Group-Addon wird geteilt oder von der Input-Gruppe getrennt. Ich habe zahlreiche Kombinationen von CSS und Styling ausprobiert.

Wie kann ich dieses Verhalten verhindern?

Auf großen Bildschirm:

auf kleinen Bildschirm: die 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 mit .col-xs- versehen, .col-md-, .col-lg- in Bezug auf die Anzeigegröße der Wiedergabevorrichtung

Die class="col-md- durch ersetzen die class="col-xs- in Sie HTML-Codes und haben eine

Answer 2

Guten Tag versuchen Sie dies:

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

falsch ist. Eine Spalte darf kein Kind einer Spalte sein. Sie benötigen eine Schicht aus row zwischen ihnen:

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

Answer 3

i hatte ein ähnliches Problem, ich habe die col-md geändert -xs aber es hat immer noch nicht helfen. Hier ist 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> 

Und das Problem wurde gelöst mit dem zweiten col-xs bis 5 einstellen, bevor er 10 war, auf 6 auch spaltet, aber weniger als bei höheren Werten, es Größe ändert, aber tut nicht geteilt.

Answer 4

Wenn Sie in Visual Studio codieren, wenn es neues Projekt erstellt, gibt es CSS-Datei, die .form-Steuerelement Breite auf 300px beschränkt. Kommentiere diesen Block und es wird funktionieren.