ブートストラップ3折りたたみグリッチ

Question

サイト：

http://www.cqwebdesign.co.uk/wine-site/france.htmlは、基本的には左のサイドバーに、あなたは彼らが崩壊見出しをクリックした場合。しかし、これを行うと、マージンやパディングがどこかに追加されているようなチェックボックスの不具合のリストに気付くでしょう。

私はこの問題を見つけることができないか、この誰かが何が起こっているのかを見ている原因は何ですか？

問題

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

Answer 1

これはoverflow: hiddenが崩壊要素に追加されるのであり、マージンは崩壊します：ソリューションが動作するかどうか

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

レムは知っています。私があなたのウェブサイトでDev Toolsを使って試してみたのを待っていて、うまくいきました。また、marginsが<ul>のためにスペースが増加していることがあります。

他のソリューションは<div class="checkbox">のmargin Sを取り除くことです。

.site-sidebar .filter-group .checkbox { 
    margin: 0; 
}