Ein Panel in das Bootstrap-Grid-System einpassen

Question

Ich habe ein einfaches Bootstrap-Panel und ich möchte, dass es 4 Spalten breit ist. Ich habe versucht, Hinzufügen der Klasse col-sm-4 wie ich jedes andere div:

<div class="row"> 
    <div class="panel panel-default col-sm-4"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
    </div> 
</div> 

Das hat die Breite richtig, aber jetzt in der Titelleiste Hintergrund ist verkorkste:

Wie kann ich es bekommen um diese Breite anzupassen, aber den Header immer noch richtig zu rendern?

Answer 1

Anstatt die Angabe der Platte die Breite von vier Spalten zu sein, was passiert, wenn man die Platte in einer Spalte mit einer Länge von vier platziert? Ich sehe nirgendwo in der Dokumentation, dass Sie die col-sm- * -Klasse auf eine Panel-Komponente anwenden können.

<div class="row"> 
    <div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
    </div> 
    </div> 
</div> 

Und denken Sie daran, dass die Spalten sollen, summieren sich zu 12. Wenn Sie also leeren Raum auf der rechten Seite und links von dem Panel wollten Sie würde so etwas tun:

<div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
    </div> 
    </div> 
    <div class="col-md-4"></div> 
</div> 

Update 1 : Sionide21 hat festgestellt, dass sich die Breite der Spalte ändert, je nachdem, ob Sie geschachtelte Zeilen haben oder nicht. Siehe Bild unten.

Die obere Reihe des Bildes ist, was passiert, wenn die Platte im Inneren der Säule direkt platziert ist (unterhalb der ersten Reihe sehen ... Dies ist die gleiche wie die erste HTML-Schnipsel dieser Veröffentlichung). Die untere Hälfte passiert, wenn Sie eine verschachtelte Zeile einfügen (siehe zweite Zeile unten).

<div class="row"> 
    <div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-4 bg-primary"><p>Left Column</p></div> 
    <div class="col-md-4"> 
    <div class="row"> 
     <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4 bg-primary"><p>Rightt Column</p></div> 
</div> 

So scheint es, dass, wenn die Platte direkt in einer Spalte angeordnet wird, etwas Abstand zu der Platte hinzugefügt wird (oder Polsterung zu der Säule hinzugefügt wird), während, wenn man die Platte in einer verschachtelten Reihe platzieren, Der Rand (oder Padding) wird eliminiert. Ich weiß nicht, ob das von Entwurf oder nur eine Eigenart von Bootstrap ist.

Update 2: Koala_dev wies darauf hin, dass das Beispiel "verschachtelte Zeile" so verhält, wie es ist, da das Panel ein direktes Kind eines Elements .row ist. Im Wesentlichen bekämpfen wir das Auffüllen der Spalte mit den negativen Rändern der Zeile. Ich weiß nicht genug über die Angelegenheit, aber er sagt, dass es in Ordnung sein sollte, wie es ist, oder Sie können benutzerdefinierte CSS erstellen, um das Padding aus dem Panel zu entfernen, oder sogar versuchen, die .row Klasse zu dem Panel selbst hinzuzufügen! Z.B. <div class="panel panel-default row">.

Answer 2

Versuchen Hinzufügen width:100% zum .panel-heading