如何刪除左右可摺疊列/手風琴

難看的墊襯我有一個行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>

來源

2016-09-28 Jinnie

如果添加下面這將修復圖片顯示的問題：

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

也就是在那裏，你正在起訴前兩個板.col-sm-2理由嗎？

來源

2016-09-28 19:53:58

修好了！終於解脫了。非常感謝你。 – Jinnie

哦，我沒有意識到這一點！將解決它。我沒有特別的理由使用sm-或lg-。我純粹是基於最終輸出。此代碼只能在監視器上查看。 – Jinnie

隨着引導它在12列布局上工作，所以應該遵循這個原則。 –

添加一個類的元素你無線sh刪除填充，然後用CSS填充該類的填充。

來源

2016-09-28 19:42:52 fauverism

不確定您是否能看到我的第一張圖片（問題的圖片）。它有陰影區域的文字（我想保留）和這個白色的部分。所有剩下的盒子也被推掉。如何將這些箱子變成我的第二張圖像？您能否更詳細地瞭解您的解決方案？我是一名初學者。謝謝。 – Jinnie

如何刪除左右可摺疊列/手風琴

回答

相關問題