从Bootstrap手风琴中移除边框

Mar*_*lo 0 html css border accordion twitter-bootstrap

我一直坚持这个(显然很容易)我无法解决的问题.我正在使用Bootstrap 3.2.0并且我无法移除手风琴面板标题和面板主体之间的线,而其他每个边框和阴影都消失了.我已经尝试了在发布之前可能给出的所有建议,但没有运气.这是HTML代码:

<ul class="nav nav-pills nav-stacked">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <p class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">PROJECTS</a>
        </p>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li><a href="#napoli" tabindex="-1" data-toggle="tab">NAPOLI</a></li>
            <li><a href="#portraits" tabindex="-1" data-toggle="tab">PORTRAITS</a></li>
          </ul>
        </div>
      </div>
    </div>
    </div>
   </ul>
</div>  
Run Code Online (Sandbox Code Playgroud)

这是迄今为止相关的CSS ...

.panel-group{
    margin:0;
}

.panel{
    border:none;
    box-shadow:none;
}

.panel-heading{
    padding:0;
}
Run Code Online (Sandbox Code Playgroud)

是它的样子:

plu*_*ect 5

请勿使用!重要.

这有效:

.panel, .panel-group .panel-heading+.panel-collapse>.panel-body{
    border: none;
}
Run Code Online (Sandbox Code Playgroud)

  • 还可以添加"box-shadow:none;" 删除看起来像底部边框的东西 (2认同)