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

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

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

您是否有理由在前两个小组中起诉.col-sm-2？

Answer 2

向要删除填充的元素添加一个类，然后使用CSS将该类添加到该类的填充上。

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

2 个答案: