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

Question

我有一个基本的引导面板，我希望它是 4 列宽。我尝试像添加任何其他 div 一样添加类 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>

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

如何让它符合该宽度但仍能正确呈现标题？

Answer 1

与其将面板指定为四列的宽度，不如将面板放置在长度为四的列中会怎样？我在文档中没有看到任何地方说您可以将 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 sn-p 相同）。下半部分是插入嵌套行时发生的情况（请参阅下面的第二行）。

<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