Entfernen einer CSS-Grenze von Bootstrap Panel
Ich habe eine bootstrap-panel, dass ich in BS 2.3.
Wenn ein panel Inhalte enthält, möchte ich zeigen, das normale panel mit seiner Grenze etc. Allerdings, wenn es keine Inhalt in den Körper, ich möchte eine Klasse um, dass es entfernt den Rahmen um das Bedienfeld Körper, so dass Sie nur Links mit dem grauen Balken im header.
Hier ist ein Turnschuh, was ich zu tun versuche: 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;
}
*/
Hier ist ein screenshot, wie will ich das Endergebnis auf Platten, die ich wählen, nicht alle von Ihnen:
InformationsquelleAutor SBB | 2015-03-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
entfernen Sie den Rahmen (und box-shadow)
.panel
und ändern der Rahmen-Unterseite.panel-heading
Grenzehttp://jsfiddle.net/xwh0ca7c/1/
2. Lösung: fügen Sie nun
noborder
zupanel
http://jsfiddle.net/xwh0ca7c/2/
ich aktualisiert meine Antwort, probieren Sie es aus 🙂
InformationsquelleAutor AlexG
panel
css
InformationsquelleAutor user4663515
Standard-Klasse in bootstrap geht:
entfernen Sie einfach die Standard-panel-Klasse in Ihren div.
InformationsquelleAutor Bojan
Können Sie überschreiben die bootstrap-styles und setzen die Grenze auf den Körper. Dies wird loszuwerden des Körpers Grenze, wenn es nicht eine Grenze und halten Sie es, wenn es einen Körper. Die mitgelieferte Antwort bisher immer entfernt die Grenze. Fiddle
InformationsquelleAutor Blunderfest