从 Bootstrap 手风琴中删除边框

Question

我一直卡在这个（看似简单的）事情上，但我无法解决。我正在使用 Bootstrap 3.2.0，我无法删除手风琴面板标题和面板 body 之间的线，而其他所有边框和阴影都消失了。我已经尝试了在发布之前可能给出的所有建议，但没有成功。这是 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>

这是目前为止的相关 CSS...

.panel-group{
    margin:0;
}

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

.panel-heading{
    padding:0;
}

This 是这样的：

Answer 1

不要使用！重要。

这个有效：

.panel, .panel-group .panel-heading+.panel-collapse>.panel-body{
    border: none;
}

Answer 2

.panel-body {border-top: 0 !important;}

这解决了这个问题，但也许添加自定义 class 或内联样式会更好，它只在需要的地方删除边框。

Answer 3

试试这个。它适用于我删除单击手风琴标题时出现的默认蓝色边框。

:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

从 Bootstrap 手风琴中删除边框

Remove border from Bootstrap accordion

html

css

twitter-bootstrap

border

accordion