Comment faire un enveloppement Div imbriqué au lieu du chevauchement

Question

J'utilise le système de grille de Bootstrap. J'ai 3 DIV à l'intérieur d'une "rangée", et à l'intérieur de chacun de ces DIVs sont des contrôles imbriqués. Lorsque je diminue horizontalement la taille du navigateur, les DIVs 2e et 3e de la rangée chevauchent la 1ère DIV. Je veux qu'ils s'enroulent, qu'ils ne se chevauchent pas. Comment puis-je atteindre cet objectif?

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

Lorsque vous dites, vous imbriquez des contrôles à div; Voulez-vous dire quelque chose comme ça?

.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

Je résolu ce problème en définissant min largeur dans un bon nombre de tags. Cela a permis aux DIVs d'envelopper les formats PC, tablette et mobile.

Je publierais le HTML qui en résulterait, mais je pense que cela affecterait trop peu de lecteurs pour que cela en vaille la peine. Je dis cela parce qu'il y a un contrôle knockout et un contrôle select2 dans le code HTML, et certaines de leurs propriétés d'interface utilisateur sont définies dans javascript.