如何使Bootstrap容器自动变高？

Question

I am a newbie for JS/CSS and also Bootstrap. And I got a problem for the Bootstrap's height. In general, when the content is too much, the different parts overlay.

My webpage is based on the Cover template ( https://github.com/twbs/bootstrap/tree/master/docs/examples/cover ) of Bootstrap. When I added many content in the <div class="inner cover"></div> block of https://github.com/twbs/bootstrap/blob/master/docs/examples/cover/index.html The layout becomes horrible and chaotic:

While the correct layout is: https://getbootstrap.com/examples/cover/

How can I make the container height auto, so that the height is adjusted according to the content length? Thanks for your attention and help!

Answer 1

Look into this css :

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

In this .css you have this part :

/*
 * 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;
  }

So, for me, the problem is your custom cover stylesheet isn't in the right place. Hopes this help you.