css - 为 Bootstrap 列表组元素制作页眉/页脚的好方法是什么？

Question

我希望能够将自己的自定义页眉、页脚等添加到列表组元素中。我确信有一种简单的方法可以做到这一点，但我的 CSS 技能低于标准。谁能告诉我解决我的尝试的好方法？ https://jsfiddle.net/r6xt1rnz/36/

我希望能够将内容插入到以下部分中，并让它们各自占据列表组元素的 33%。

<li class="list-group-item">
    <div class="list-header row">
      This is the header
    </div>
    <div class="list-content row">
      This is the content
    </div>
    <div class="list-footer row">
      This is the footer
    </div>
  </li>

谢谢!

Answer 1

如果你想有百分比的垂直高度，你需要使用下面的代码:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

这样，您可以按百分比控制高度。非常不鼓励使用这种方法，它不能与 bootstrap 等框架一起使用。但是您可以尝试添加包装器:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.first-top {
  height: 30%;
  background: #ccf;
}
.middle-top {
  height: 40%;
  background: #cfc;
}

<div class="first-top">
  <!-- Give the list items here. -->
</div>
<div class="middle-top"></div>
<div class="first-top"></div>