我有一个基本的自举面板,我希望它是4列宽.我尝试添加类col-sm-4像我会任何其他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>
这个宽度是正确的,但现在标题栏背景搞砸了：
如何让它符合该宽度,但仍然正确地呈现标题？
解决方法
不要将面板指定为四列的宽度,如果将面板放在长度为四列的列中,该怎么办？文档中的任何地方都看不到您可以将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注意到列的宽度根据是否嵌套行而有所不同.见下图.
图像的顶行是当面板直接放在列中时会发生的情况(请参见下面的第一行…这与此帖子的第一个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”> ;.
