html - 响应缩放部分不使用 bootstrap jumbotron 进行缩放

Question

有点难以解释，所以我将发布一个指向托管代码的站点的实时链接:link

基本上，问题出在“关于”部分，如果窗口缩放得更小，则该部分不会像其他不使用 bootstrap div 的部分那样补偿溢出的超大屏幕。希望这是有道理的？

相关代码如下:

<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;">
    <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
        <br>
        <div class="jumbotron" style="background-color: #4c0000; padding-top: 10px; padding-bottom: 10px;">
            <div class="container text-center" style="color: white;">
              <h1>A Little About Me</h1>   
              <p style="font-size: 16px;">wordsgohere</p>
              <p><h3><b>TLDR:</b></h3></p>
              <p style="font-size: 16px">wordsgohere</p>
              <img src="imgs/ryanyup.png" class="img-responsive" style="align-content: left">
            </div>
        </div>
    </div>
</section>

和 CSS:

.about-section {
    min-height: 100%;
    text-align: center;
    background: #000080;
}

整个代码也可以在我的 git 上找到:here

谢谢。

Answer 1

添加<div class="clearfix"></div>就在关闭该部分之前。您需要它的原因是因为该部分内的 div 是 float 的，因此不是真正的 block 。