將面板安裝到引導程序的網格系統中

我有一個基本的引導程序面板，我希望它是4列寬。我嘗試添加類col-sm-4像我對待任何其他分區：將面板安裝到引導程序的網格系統中

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

這讓寬度是正確的，但現在的標題欄背景搞砸：

panel with messed up header

我如何得到它以符合該寬度，但仍然正確地呈現標題？

來源

2014-07-18 Sionide21

而不是指定所述面板是四列的寬度，如果放置在面板與長度四列什麼？我沒有看到文檔中提到可以將col-sm- *類應用於面板組件的任何地方。

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

記住的列都應該加起來12.所以，如果你想在右邊空白處，離開你的面板，你會做這樣的事情：

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

更新1 ：Sionide21注意到列的寬度根據是否嵌套行而改變。見下圖。

Non-Nested Panel Versus Nested Panel

圖像的最上面一行是面板直接放置在柱內發生的（見下面第一行......這是一樣的這篇文章的第一個HTML片段）。下半部分是插入嵌套行時發生的情況（請參見下面的第二行）。

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

所以看來當面板被直接放置在塔的內部，一些裕度添加到面板（或填充被添加到柱），而當您將面板在嵌套行，邊距（或填充）被消除。我不知道這是通過設計還是僅僅是Bootstrap的一個怪癖。

更新2：koala_dev指出「嵌套行」示例的行爲與原因相同，因爲該面板是.row元素的直接子元素。所以實質上，我們正在反擊行的負邊距的列的填充。我對這件事並不十分了解，但他表示應該保持原樣，或者您可以創建自定義CSS以從面板中刪除填充，或者甚至可以嘗試將.row類添加到面板本身！例如。 <div class="panel panel-default row">。

來源

2014-07-18 02:29:24

這確實修復了標題，但現在寬度與常規'col-md-4'不匹配。如果我在「col-md-4」div中插入一行，然後把面板放在裏面，它就起作用 – Sionide21

我不明白「寬度與常規col-md-4不匹配」。什麼寬度？但根據Bootstrap文檔（請參見[嵌套列]（http://getbootstrap.com/css/#grid-nesting）），嵌套行非常合適。所以，如果這對你有用，那麼對你更有力量。 –

它不符合常規'.col-md-6'的寬度。嵌套另一行雖然糾正它。如果你爲後代添加，我會接受你的回答 – Sionide21

嘗試增加width:100%到.panel-heading

來源

2014-07-18 02:17:56 qtgye

這似乎沒有任何效果 – Sionide21

將面板安裝到引導程序的網格系統中

回答

相關問題