如何删除左右可折叠列/手风琴

难看的垫衬我有一个行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

如何删除左右可折叠列/手风琴

回答

相关问题