将面板安装到引导程序的网格系统中 [英] Fitting a panel into bootstrap's grid system

问题描述

我有一个基本的bootstrap面板，我想它是4列宽。我试着添加类 col-sm-4 ，就像我会任何其他div：

I have a basic bootstrap panel and I want it to be 4 columns wide. I tried adding the class col-sm-4 like I would any other 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?

推荐答案

将面板指定为四列的宽度，如果将面板放置在长度为四的列中怎么办？我在文档中没有看到任何地方说，你可以应用col-sm- *类到面板组件。

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.

<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.所以如果你想要空您的面板左右可以这样做：

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:

<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注意到列的宽度会根据是否有嵌套行。

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

图像的顶行是当面板直接放置在列中时发生的情况（请参见下面的第一行...这与第一个HTML相同）这篇文章的代码段）。下半部分是当您插入嵌套行时发生的情况（见下面第二行）。

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).

<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.

更新2：koala_dev指出，嵌套行的例子是行为，因为它是因为，该面板是 .row 元素的直接子级。因此，本质上，我们用行的负边距来抵消列的填充。我不知道这件事情，但他说，应该是好的离开，或者你可以创建自定义CSS来删除面板中的填充，或甚至可以尝试添加。 row 类面板本身！例如。 < div class =panel panel-default row> 。

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 .row element. 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 .row class to the panel itself! E.g. <div class="panel panel-default row">.

这篇关于将面板安装到引导程序的网格系统中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！