jquery - 如何清除可折叠立柱/ Accordion 周围难看的填充物

我一行中有6列，它们是面板组的一部分。当一个列打开时，另一个先前打开的列关闭。但是，布局周围有这些难看的填充或边框，列也显得离网。我试图寻找解决方案，但没有运气。

这是问题的输出：



我需要具备的条件：



这是我的问题代码：

            <div class="container">
           <div class="row">
              <div class="panel-group" id="Heyaccordion">
                 <div class="panel panel-default col-sm-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopOneMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-piggy-bank"></span>&#160;&#160;&#160;PC Inventory<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopOneMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-ok"></span>
                          <a href="#">&#160;&#160;&#160;Somewhere </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-sm-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopTwoMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopTwoMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopThreeMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopThreeMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopFourMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopFourMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopFiveMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopFiveMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopSixMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopSixMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google</a> </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>

最佳答案

如果添加以下内容，它将解决图片中显示的问题：

#Heyaccordion .panel {
     margin-top: 5px;
     padding: 0;
     margin-left: 10px;
     margin-right: 10px;
     max-width: 164px;
}

另外，您是否有理由在前两个面板上起诉.col-sm-2？

关于jquery - 如何清除可折叠立柱/ Accordion 周围难看的填充物，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39756312/