Question

我希望能够将自己的自定义页眉，页脚等添加到list-group-items。我确信有一个简单的方法可以做到这一点，但我的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%;
}

这样，您可以控制height百分比。非常不鼓励这种方法，不可以使用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>

为Bootstrap list-group-items制作页眉/页脚的好方法是什么？

1 个答案: