将面板安装到bootstrap的网格系统中

Question

我有一个基本的自举面板，我希望它是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>

这使得宽度正确，但现在标题栏背景搞砸了：

如何使其符合该宽度，但仍能正确呈现标题？

Answer 1

如果将面板放在长度为4的列中，而不是将面板指定为四列的宽度，该怎么办？我没有在文档中看到任何说明可以将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">。

Answer 2

尝试将width:100%添加到.panel-heading