如何使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;
  }

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