如何去除可折叠柱子/手风琴周围难看的填充物

Question

我在一行中有 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>

Answer 1

向要从中删除填充的元素添加 class，然后使用 CSS.

将 class 上的填充设为 0

Answer 2

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

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

还有你在前两个面板上起诉 .col-sm-2 的原因吗？

如何去除可折叠柱子/手风琴周围难看的填充物

How to remove unsightly paddings around collapsible columns / accordion

css

jquery

multiple-columns

twitter-bootstrap-3

bootstrap-accordion