Wie verschachtelte Div-Umbruch statt Überlappung machen

Question

Ich benutze Bootstrap-Grid-System. Ich habe 3 Divs in einer "Zeile", und in jedem dieser Divs sind verschachtelte Controls. Wenn ich horizontal die Browsergröße verringere, überlappen die 2. und 3. DIV in der Reihe das 1. DIV. Ich möchte, dass sie sich überlappen, nicht überlappen. Wie kann ich das erreichen?

<!-- SEARCH CONTROLS --> 
<div class="row"> 
    <!-- Left side search boxes and search button --> 
    <div class="col-xs-5"> 
     <div class="article" id="SAorPIList"> 
      <select style="min-width: 215px; max-width: 300px;" class="col-xs-4 form-control" data-bind="value: selectedSAPIValue, options: saorpi, optionsText: 'Name', optionsValue: 'CmeTypeId', optionsCaption: 'Select SA or PI'"></select> 
     </div> 
     <div class="col-xs-5" style="padding-top: 20px;"> 
      <select style="max-width: 300px;" class="specialties-class form-control" name="Name" id="SpecialtyId"></select> 

     </div> 
     <div class="col-xs-5" style="max-width: 150px; padding-top: 20px; padding-left: 175px;"> 
      <button id="btnDropDownsSearch" class="btn btn-search collapsed" type="button"> 
       <i class="icon-search"></i> 
      </button> 
     </div> 
    </div> 

    <!-- The world "OR" in the center of the page --> 
    <div class="col-xs-2" style=" padding-left: 75px; padding-top:50px;"> 
      <strong style="display:inline;">OR</strong> 
    </div> 

    <!-- Right side search box --> 
    <div class="col-xs-5 pull-left" style="padding-bottom: 50px; min-width:400px;"> 
     <span><strong style="text-align:left;">Activity Search</strong></span> 
     <div class="col-xs-4 input-group pull-left input-group-lg" style="padding-top:50px;"> 
      <input id="txtFreeformSearch" class="form-control" type="search" style="min-width:175px;" /> 
      <div class="input-group-btn"> 
       <button id="btnFreeformSearch" class="btn btn-search collapsed" type="button"> 
        <i class="icon-search"></i> 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Wenn Sie sagen, Sie nisten Kontrollen div; Meinst du sowas?

.row > div { 
 
    background: lightgrey; 
 
    border: 1px solid grey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div> 
 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div> 
 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div> 
 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div> 
 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div> 
 
</div>

Answer 2

Ich löste diese min-Breite innerhalb einer guten Anzahl der Tags durch die Definition. Dadurch konnten die DIVs in PC-, Tablet- und Mobile-Formate eingebunden werden.

Ich würde das resultierende HTML veröffentlichen, aber ich denke, es würde zu wenig Leser beeinflussen, um es lohnend zu machen. Ich sage das, weil es ein Knockout-Steuerelement und ein select2-Steuerelement innerhalb des HTML gibt und einige ihrer UI-Eigenschaften in Javascript definiert sind.