Question

我在Bootstrap中遇到一种奇怪的行为，其中col-sm-6正在其上方的兄弟列上扩展，这使得兄弟列无法点击。

请在此处查看源代码和现场演示：Codepen

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

“如上所述”的复选框无法点击，因为物理地址“地址行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}以查看是否解决了该问题，然后尝试尽可能清除浮动广告。

此外，请阅读this，这可能会有所帮助

Bootstrap：col-sm-6在xs屏幕大小上扩展到其他列之上

1 个答案: