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

Fitting a panel into bootstrap's grid system

提问by Sionide21

I have a basic bootstrap panel and I want it to be 4 columns wide. I tried adding the class col-sm-4like I would any other div:

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

This got the width correct, but now the title bar background is messed up:

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

How do I get it to conform to that width but still render the header correctly?

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

回答by Kayce Basques

Rather than specifying the panel to be the width of four columns, what if you placed the panel in a column with length-four? I don't see anywhere in the documentation that says that you can apply the col-sm-* class to a panel component.

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

And remember that the columns are supposed to add up to 12. So if you wanted empty space on the right and left of your panel you would do something like this:

请记住，列应该加起来为 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>

Update 1: Sionide21 noticed that the width of the column changes depending on whether or not you have nested rows. See image below.

更新 1：Sionide21 注意到列的宽度会根据您是否有嵌套行而变化。见下图。

The top row of the image is what happens when the panel is placed directly inside of the column (see first row below... this is the same as the first HTML snippet of this post). The bottom half is what happens when you insert a nested row (see second row below).

图像的顶行是将面板直接放置在列内时发生的情况（请参阅下面的第一行...这与本文的第一个 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>

So it appears that when the panel is placed directly inside of a column, some margin is added to the panel (or padding is added to the column), whereas when you place the panel in a nested row, the margin (or padding) is eliminated. I do not know if this is by design or just a quirk of Bootstrap.

因此，当面板直接放置在列内时，面板上会添加一些边距（或向列添加填充），而当您将面板放置在嵌套行中时，边距（或填充）是消除。我不知道这是设计使然还是 Bootstrap 的一个怪癖。

Update 2: koala_dev pointed out that the "nested row" example is behaving as it is because the panel is a direct child of a .rowelement. So in essence we're countering the padding of the column with the negative margins of the row. I don't know enough about the matter, but he says that it should be fine to leave as is, or you can create custom CSS to remove the padding from the panel, or could even try adding the .rowclass to the panel itself! E.g. <div class="panel panel-default row">.

更新 2： koala_dev 指出“嵌套行”示例的行为如此，因为面板是.row元素的直接子元素。所以本质上，我们是用行的负边距来对抗列的填充。我对此事的了解还不够，但他说保持原样应该没问题，或者您可以创建自定义 CSS 以从面板中删除填充，或者甚至可以尝试将.row类添加到面板本身！例如<div class="panel panel-default row">。

回答by qtgye

Try adding width:100%to the .panel-heading

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