Question

面板页脚应使用bootstrap 3主题中的不同背景颜色。我试过下面的代码，但所有页脚都是灰色的？如何强制bootrap使用面板页脚中的类的背景颜色？

小组最初确定了高度。应该可以将它们调整到零高度。

以下代码设置ming-height 0无处不在。但是，忽略调整小于一行的高度。

如何允许调整到零高度？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
  .panel-resizable {
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  .panel {
    margin-bottom: 0;
  }
</style>
<script>
  $(function() {
    $(".panel-resizable").resizable({
      minWidth: "100%",
      maxWidth: "100%",
      minHeight: 0
    });
  });
</script>
</head>

<body>

  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-info'>PageHeader</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:9.37cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupHeader str(dokumnr)+str(koopia,2)</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.66cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupHeader str(dokumnr)+str(koopia,2)</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.53cm'>
    </div>
    <div class='panel-footer panel-primary'>Detail</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupFooter</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:7.68cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupFooter</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-default'>PageFooter</div>
  </div>

</body>

</html>

Answer 1

上下文类（如panel-warning）与panel类一起使用，而不是直接与panel-footer一起使用。但页脚不会继承颜色，这就是它的工作原理。

如果您不想手动添加颜色，可以使用"contextual backgrounds"并执行以下操作：

<强> HTML

<div class="panel panel-warning">
    <div class="bg-warning">
        <div class="panel-footer">Your footer</div>
    </div>
</div>

<强> CSS

.panel-footer { background-color: inherit; }

您无法设置＆＃34;身高＆＃34;为0，因为panel-body有padding。尝试删除它。

.panel-body { padding: 0; }

Answer 2

最直接的方法是覆盖Bootstrap的样式......

.panel-footer {
  background-color: blue;
}

使用像素作为高度。

将bootstrap背景应用于面板页脚

2 个答案: