如何制作嵌套Div包装而不是重叠

我正在使用Bootstrap的网格系统。我在“行”内有3个DIV，每个DIV内部都是嵌套控件。当我水平减小浏览器大小时，行中的第二个和第三个DIV与第一个DIV重叠。我希望他们包装，而不是重叠。我怎样才能做到这一点？如何制作嵌套Div包装而不是重叠

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

来源

2017-03-29 markoos

请张贴您的代码部分的问题 –

我玩得越多，我认为答案就越多地使用最小宽度。 – markoos

当你说，你嵌套控制div;你的意思是这样吗？

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

来源

2017-03-29 13:58:40 learning1216

否。请参阅我添加到我的问题的HTML。 – markoos

我通过定义好多个标签的内部最小宽度解决了这个。这允许DIV包装成PC，平板电脑和手机格式。

我会发布生成的HTML，但我认为它会影响太少的读者，使其值得。我这样说是因为在HTML中有一个knockout控件和select2控件，并且它们的一些UI属性是在javascript中定义的。

来源

2017-03-29 17:03:57 markoos

如何制作嵌套Div包装而不是重叠

回答

相关问题