Question

有问题的网站：http://www.cqwebdesign.co.uk/wine-site/france.html

如果单击标题，它们基本上会在左侧边栏中折叠。但是，当您执行此操作时，您会注意到复选框列表会出现故障，例如在某处添加了边距或填充。

我似乎无法找到问题或是什么导致其他人看到了什么？

问题

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<h3 data-toggle="collapse" data-target="#Colour"><i class="fa fa-angle-down"></i> Colour</h3>
<div id="Colour" class="filter-group collapse in">
  <ul>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Red (221)</label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Dry White (128)</label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Sparkling (19)</label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Sweet White (16)</label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Rose (6)</label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Mixed Cases (1)</label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label><input type="checkbox"> Spirits and Liqueurs (1)</label>
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

这是因为overflow: hidden被添加到了折叠元素并且边距折叠了：

.site-sidebar .filter-group {
  overflow: hidden;
}

Lemme知道解决方案是否有效。等我，因为我在你的网站上使用开发工具尝试它，它工作。此外，由于margins的{{1}}，您可能会发现空间有所增加。

另一个解决方案是摆脱<ul>的{{1}}：

margin

Bootstrap 3崩溃毛刺

1 个答案: