html - css bootstrap "Contextual backgrounds"显示没有填充

Question

我正在尝试使用 css bootstrap framework .我想像文档显示的那样使用“上下文背景” block 。

这是文档的截图

所以我尝试做这样的事情:

<div>
    <p class="bg-warning">
        Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.
    </p>
</div>

问题是显示的 block 没有填充。该 block 显示了正确的背景，但没有填充。

我知道我可以手动添加样式来添加填充，但我不应该这样做。我在这里做错了什么吗？

这是代码显示内容的屏幕截图:

Answer 1

Bootstrap 文档中的示例使用一些自定义类来显示自定义容器中的背景颜色。默认情况下，bg-primary、bg-success 等仅定义应用它们的元素的 background-color 属性。

如果你想要填充，你可以使用这些其他选择之一。

警报

<div class="alert alert-warning">
  <p style="color:black;">Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.</p>
</div>

列表组

<ul class="list-group">
  <li class="list-group-item list-group-item-warning" style="color:black;">Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.</li>
</ul>

面板

<div class="panel panel-warning">
    <div class="panel-heading">
      <p class="panel-title" style="color:black;">
        Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.
      </p>
  </div>
</div>

注意:使用 style="color:black;" 将文本颜色更改为黑色，因为黄色背景上的默认黄色文本看起来有点傻(但可以随意更改它随你喜欢。)

这是一个 Bootply在行动中展示这些。