如何使Bootstrap容器自动变高？

Question

我是JS / CSS和Bootstrap的新手。 而且我对Bootstrap的高度有疑问。 通常，当内容太多时，不同的部分会重叠。

我的网页基于Bootstrap的Cover模板（ 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;
  }

因此，对我来说，问题在于您的自定义封面样式表放置在不合适的位置。 希望这对您有所帮助。