如何使嵌套的Div换行而不是重叠？

Question

我正在使用Bootstrap的网格系统。我在“行”中有3个divs，并且每个divs内部都是嵌套控件。

当我横向减小浏览器大小时，行中的第2和第3个div与第1个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>

Answer 1

当你说，你将控件嵌套到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>

Answer 2

我通过在很多标签内定义最小宽度来解决这个问题。这使得DIV可以包装在PC，平板电脑和移动格式中。

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