我有一个在 BS 2.3 中使用的 Bootstrap 面板。
当面板包含内容时,我想显示带有边框等的普通面板。但是,当正文中没有内容时,我想对其应用一个类来移除面板主体周围的边框,以便您只剩下标题中的灰色条。
这是我正在尝试做的事情的 fiddle :http://jsfiddle.net/xwh0ca7c/
<div class="panel">
<div class="panel-heading"> <span class="panel-title"><i class="icon-list-alt"></i> My Training Projects</span></div>
<div class="panel-body">
I do not want this border around the "Body" of this panel, just the heading. Really, when I remove the body div, I dont understand why the border is still there to begin with. I need a custom class that will allow me to not show the border / around the panel body
</div>
CSS:
.panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
/* This kinda of works but I only want to apply it to specific panels, not all
.panel, .panel-group .panel-heading+.panel-collapse>.panel-body{
border: none;
}
*/
这是我希望在我选择的面板上获得最终结果的屏幕截图;不是所有的人:
最佳答案
移除.panel
的边框(和box-shadow)并将.panel-heading
的border-bottom改为border
http://jsfiddle.net/xwh0ca7c/1/
第二个解决方案:现在将 noborder
添加到 panel
.panel.noborder {
border: none;
box-shadow: none;
}
.panel.noborder > .panel-heading {
border: 1px solid #dddddd;
border-radius: 0;
}
关于html - 从 Bootstrap 面板中删除 CSS 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29013014/