将面板安装到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

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