Html 从 Bootstrap 面板中删除 CSS 边框

Removing a CSS Border from Bootstrap Panel

提问by SBB

I have a bootstrap panel that I am using in BS 2.3.

我有一个在 BS 2.3 中使用的引导面板。

When a panel contains content, I want to show the normal panel with its border etc. However, when there is no content in the body, I want to apply a class to it that removes the border around the panel body so that you are just left with the gray bar in the header.

当面板包含内容时，我想显示带有边框等的普通面板。但是，当正文中没有内容时，我想对其应用一个类来删除面板正文周围的边框，以便您只是左侧带有标题中的灰色条。

Here is a fiddle of what I am trying to do: http://jsfiddle.net/xwh0ca7c/

这是我正在尝试做的事情：http: //jsfiddle.net/xwh0ca7c/

<div class="panel">
  <div class="panel-heading"> <span class="panel-title"><i class="icon-list-alt"></i>&nbsp;&nbsp;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:

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;
}
*/

Here is a screenshot of how I want the final result on panels I choose; not all of them:

这是我希望在我选择的面板上获得最终结果的屏幕截图；不是所有的人：

回答by AlexG

remove the border (and box-shadow) of .paneland change the border-bottom of .panel-headingto border

删除边框（和框阴影）.panel并将边框底部更改.panel-heading为边框

http://jsfiddle.net/xwh0ca7c/1/

http://jsfiddle.net/xwh0ca7c/1/

---

---

2nd solution: now add noborderto panel

第二个解决方案：现在添加noborder到panel

.panel.noborder {
    border: none;
    box-shadow: none;
}
.panel.noborder > .panel-heading {
    border: 1px solid #dddddd;
    border-radius: 0;
}

http://jsfiddle.net/xwh0ca7c/2/

http://jsfiddle.net/xwh0ca7c/2/

回答by user4663515

panel

控制板

<!-- Test Panel -->
<div class="panel panel-empty">
      <div class="panel-heading"> <span class="panel-title"><i class="icon-list-alt"></i>&nbsp;&nbsp;My Training Projects</span></div>
</div>

css

css

.panel-empty{
    padding-left:15px;
    padding-right:15px;
    padding-top:0px;
    padding-bottom:0px;
    border:0px;
    -webkit-box-shadow: 0 ;
     box-shadow: 0 ;
}

.panel-empty .panel-heading{
    border: 1px solid #dddddd;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

回答by Bojan

default class in bootstrap goes:

bootstrap 中的默认类是：

.panel {
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  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);
}

just remove the default panel class in your div.

只需删除 div 中的默认面板类。

回答by Blunderfest

You can override the bootstrap styles and put the border on the body. This will get rid of the body border when there isn't a border and keep it when there is a body. The provided answer so far always removes the border. Fiddle

您可以覆盖引导程序样式并将边框放在主体上。这将在没有边框时摆脱正文边框，并在有正文时保留它。到目前为止提供的答案总是删除边框。小提琴

.panel{
  border:none;
  padding:0;
}
.panel-heading{
  border:1px solid #ccc;
  padding:10px;
  margin:0;
}
.panel-body{
  border:1px solid #ccc;
  padding:10px;
  border-top:0;
}