twitter-bootstrap 从 Bootstrap 手风琴中删除边框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28866553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:25:07  来源:igfitidea点击:

Remove border from Bootstrap accordion

htmlcsstwitter-bootstrapborderaccordion

提问by Marcello

I've been stuck on this (apparently easy) thing that I can't manage to solve. I'm using Bootstrap 3.2.0 and I'm not able to remove the line between the accordion panel title and the panel body while every other border and shadow is gone. I've already tried every suggestion that was possibly given before posting but got no luck. This is the HTML code:

我一直被困在这个(显然很容易)的事情上,我无法解决。我正在使用 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>  

And here is the relevant CSS so far...

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

.panel-group{
    margin:0;
}

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

.panel-heading{
    padding:0;
}

Thisis how it look like:

是它的样子:

回答by plushyObject

DON'T USE !IMPORTANT.

不要使用!重要。

This works:

这有效:

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

回答by Mackan

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

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

This takes care of the question, but perhaps it would be better to add a custom class, or inline style, that only removed the border where needed.

这解决了这个问题,但也许最好添加一个自定义类或内联样式,只在需要的地方删除边框。