将面板安装到引导程序的网格系统中

我有一个基本的引导程序面板，我希望它是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

将面板安装到引导程序的网格系统中

回答

相关问题