Bir panelin önyükleme ızgara sistemine takılması

Question

Temel önyükleme panelim var ve 4 sütun genişliğinde olmasını istiyorum. Ben benim gibi sınıf col-sm-4 ekleyerek çalıştı başka herhangi 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> 

Bu genişlik doğru var, ama şimdi başlık çubuğu arka plan berbat:

Nasıl alırım Bu genişliğe uymak ama yine de başlığı doğru şekilde işlemek için?

Answer 1

için width:100% ekleyerek ziyade Eğer uzunluk dört bir sütunda paneli yerleştirilmiş ne olur dört sütun genişliği olmak paneli, belirterek? Belgede col-sm- * sınıfını bir panel bileşenine uygulayabileceğinizi belirten bir yer görmüyorum.

<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> 

Ve sütunlar böyle bir şey yapacağını sağdaki boşluk istedi Yani eğer 12'ye eklemen gerekir ve panelin bırakılır unutmayın:

<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> 

Güncelleme 1 : Sionide21, sütunun genişliğinin iç içe geçmiş satırlarınız olup olmamasına bağlı olarak değiştiğini fark etti. Aşağıdaki resme bakın.

görüntünün üst satırı paneli sütunun içine doğrudan yerleştirildiğinde (Aşağıdaki ilk satır bakın ... Bu bu yazının ilk HTML pasajı aynıdır) ne olduğudur. Yuvalanmış bir satır eklediğinizde alt yarısı ne olur (aşağıdaki ikinci satıra bakın).

<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> 

Yani paneli sütunun içine doğrudan yerleştirildiğinde, bazı marjı (veya dolgu kolona eklenir) paneline eklenir görünür, bir iç içe üst üste paneli yerleştirdiğinizde, oysa marj (veya dolgu) elimine edilir. Bunun tasarım mı yoksa sadece Bootstrap tuhaflığı mı olduğunu bilmiyorum.

Güncelleştirme 2: koala_dev, "iç içe satır" örneğinin, panelin .row öğesinin doğrudan bir alt öğesi olduğu için olduğu gibi davrantığına dikkat çekti. Yani özünde, satırın negatif kenar boşlukları ile sütunun dolgusuna karşıyız. Mesele hakkında yeterince bilgim yok, ama olduğu gibi bırakılması gerektiğini ya da panelden dolguyu kaldırmak için özel CSS oluşturabileceğinizi ya da panelin kendisine .row sınıfını eklemeyi bile deneyebileceğinizi söylüyor! Örneğin. <div class="panel panel-default row">.

Answer 2

deneyin .panel-heading