Jquery 自举手风琴嵌套网格

我一直在试图弄清楚为什么每行之间如此接近，而每行的底部都应该有边距/填充

请参阅“受影响的区域”和下面的其他行堆栈，除非我放置
，否则没有任何间距。如果我将它们从手风琴上移除，它会正确渲染，这意味着它们之间有间隔。还有，当你将鼠标悬停在侧菜单上时，你知道如何平滑页面吗？它看起来很慢，而且口吃

后端登录不工作
转到wp管理员

---

是的，这很管用，但在手风琴内部，将它们排成一行会破坏间距吗？是的，但移除面板组修复了它，但我还是会增加你的答案。显然，你覆盖了

.panel

的

页边距底部。您的一些面板似乎没有用
hm包装，它们是如何被覆盖的？该行不应该默认整个div的包装。@AlexG Ah Nevermind我认为是一个面板组造成的。现在我想知道为什么雪佛龙坏了。
 <div class="col-md-3"> <!-- Area affected block -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel panel-default">
                            <div class="panel-heading">Area Affected</div>
                            <div class="panel-body">
                                backend login is not working 
                           </div>
                        </div>
                    </div>
                </div><br>
                <div class="row">           
                    <div class="col-md-12">
                        <div class="panel panel panel-default">
                            <div class="panel-heading">Step to replicate issue</div>
                            <div class="panel-body">
                                go to wp-admin
                           </div>
                        </div>
                    </div>
                </div> <br>
                <div class="row">          
                    <div class="col-md-12">
                        <div class="panel panel panel-default">
                            <div class="panel-heading">Urls</div>
                            <div class="panel-body">
                                <a href="#">Ticket live link</a> <br />
                                <a href="#">Internal QA link</a> <br />
                                <a href="#">External QA link</a> <br />
                           </div>
                        </div>
                    </div>
                </div>
            </div> <!-- Area affected block -->

           function toggleChevron(e) {
            $(e.target)
                .prev('.panel-heading')
                .find('i.indicator')
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        }
        $('#accordion').on('hidden.bs.collapse', toggleChevron);
        $('#accordion').on('shown.bs.collapse', toggleChevron); 

<div class="col-md-3"> <!-- Area affected block -->

       <div class="panel panel-default">
           <div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Area Affected</a></div>
           <div class="panel-body">
               backend login is not working 
           </div>

       </div>

       <div class="panel panel-default">
           <div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Step to replicate issue</a></div>
           <div class="panel-body">
               go to wp-admin
           </div>

       </div>

       <div class="panel panel-default">
           <div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Urls</a></div>
           <div class="panel-body">
               <a href="#">Ticket live link</a> <br>
               <a href="#">Internal QA link</a> <br>
               <a href="#">External QA link</a> <br>
           </div>

      </div>