折りたたみ可能な列/ accordionの周りに見苦しいパディングを取り除く方法

Question

パネルグループの一部である6つの列が1つの行にあります。 1つの列が開くと、もう1つ前に開いた列が閉じます。しかし、レイアウトには見苦しいパディングや枠線があり、グリッドもグリッド外に表示されます。私は解決策を見出そうとしましたが、運はありませんでした。ここで

は、問題の出力です：

私が持っている必要なもの：

  <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

追加：ここで

は私の問題のコードです要素へのクラスshを使用してCSSからパディングを削除し、そのクラスのパディングを0にします。