如何使 Bootstrap 容器自动调整高度？

Question

我是 JS/CSS 和 Bootstrap 的新手。我对 Bootstrap 的高度有疑问。一般来说，内容太多时，不同的部分会重叠。

我的网页基于 Bootstrap 的封面模板 (https://github.com/twbs/bootstrap/tree/master/docs/examples/cover)。 当我在https://github.com/twbs/bootstrap/blob/master/docs/examples/cover/index.html 的<div class="inner cover"></div> 块中添加了许多内容时 布局变得可怕而混乱：

虽然正确的布局是：https://getbootstrap.com/examples/cover/

如何使容器高度自动，以便根据内容长度调整高度？感谢您的关注和帮助！

Answer 1

看看这个css：

<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">

在这个 .css 中你有这个部分：

/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }

所以，对我来说，问题是您的自定义封面样式表不在正确的位置。希望对您有所帮助。