当我使用表单时，为什么没有在引导程序中显示面板头？

Question

我想要一个包含面板标题的from，但是当我包含表单时，面板标题不显示。只要我在标记中包含一个表单，面板标题背景就会消失。我该如何解决这个问题？

使用表格：

<div class="col-md-11 pane top30">
<div class="panel panel-default">
<form action="">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</form>
</div>

</div>

没有形式：

<div class="col-md-11 pane top30">
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

</div>

Answer 1

只需将表单放在panel

之外

<form action="">
    <div class="panel panel-default">
     ....
    </div>
</form>

为什么它不能正常工作：bootstrap定义了这样的标题css

.panel-default>.panel-heading
 {
 }

因此，在这种情况下，panel-heading css仅在.panel-default的直接子项时才会生效 但在您的情况下，panel-heading是form的直接子女。

Js Fiddle Demo

Answer 2

Why isn't panel head showing in bootstrap when I use a form?

CSS通常基于nth-child之类的东西 - 所以标题应该是面板的第一个子节点才能正常工作。