引导:col-sm-6在xs屏幕大小上扩展到其他列之上

Question

我在Bootstrap中遇到了一个奇怪的行为，一个col-sm-6在它上面的同级列的顶部展开，这使得同级列不可点击。

请在这里查看源代码和实时演示：Codepen

将输出窗口的大小调整为xs大小（低于768px）以体验问题）。

"As above"复选框是不可点击的，因为物理地址"address line 1"正在其上方展开，从而产生某种障碍。

这个问题可以通过在"col-sm-6"之外添加"col-xs-12"来解决，但Bootstrap应该在没有这个的情况下自行解决这个问题（就像它通常做的那样）。你知道是什么原因造成的吗？

编辑：有人可能会说我应该把所有字段放在不同的行中，但出于各种原因，我想把所有字段都放在一行中，让Bootstrap来计算项目的流程，这通常很好。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h3>Postal address</h3>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPostalAddressLine1">Address line 1*</label>
        <input type="text" class="form-control" id="inputPostalAddressLine1" required="" data-parsley-required-message="Please enter your postal address.">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPostalAddressLine2">Address line 2</label>
        <input type="text" class="form-control" id="inputPostalAddressLine2">
      </div>
    </div>
    <div class="clearfix hidden-xs"></div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPostalState">State*</label>
        <select class="form-control" id="inputPostalState" required="" data-parsley-required-message="Please select the state from the dropdown.">
          <option value="">Please Select</option>
          <option value="nsw">NSW</option>
          <option value="nt">NT</option>
          <option value="qld">QLD</option>
          <option value="sa">SA</option>
          <option value="tas">TAS</option>
          <option value="vic">VIC</option>
          <option value="wa">WA</option>
        </select>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPostalPostcode">Postcode*</label>
        <input type="text" class="form-control" id="inputPostalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
      </div>
    </div>
    <div class="clearfix hidden-xs"></div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPostalSuburb">Suburb*</label>
        <input type="text" class="form-control" id="inputPostalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
      </div>
    </div>
    <div class="col-xs-12">
      <h3>Physical address</h3>
    </div>
    <div class="col-xs-12">
      <div class="form-group">
        <div class="checkbox checkbox-default">
          <label>
            <input type="checkbox" value="" id="use-postal-address" data-parsley-multiple="use-postal-address">
            <span class="icon"></span>
            <span class="text">As above (use postal address)</span>
          </label>
        </div>
      </div>
    </div>
    <div class="col-sm-6 ">
      <div class="form-group">
        <label for="inputPhysicalAddressLine1">Address line 1*</label>
        <input type="text" class="form-control" id="inputPhysicalAddressLine1" required="" data-parsley-required-message="Please enter your physical address.">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPhysicalAddressLine2">Address line 2</label>
        <input type="text" class="form-control" id="inputPhysicalAddressLine2">
      </div>
    </div>
    <div class="clearfix hidden-xs"></div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPhysicalState">State*</label>
        <input type="text" class="form-control" id="inputPhysicalState" value="NSW" disabled="disabled">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPhysicalPostcode">Postcode*</label>
        <input type="text" class="form-control" id="inputPhysicalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
      </div>
    </div>
    <div class="clearfix hidden-xs"></div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputPhysicalSuburb">Suburb*</label>
        <input type="text" class="form-control" id="inputPhysicalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
      </div>
    </div>
  </div>
</div>

Answer 1

我认为您没有在媒体查询中正确地清除浮动。

添加.col-sm-6{overflow:hidden}，看看它是否能解决问题，然后尽可能清除您的浮点值。

此外，仔细阅读这篇文章，它可能会对有帮助