Question

有点难以解释，所以我会在我托管代码的网站上发布实时链接：link

基本上问题出在about部分，如果窗口缩小了，那么该部分将不会像对不使用bootstrap div的其他部分那样补偿溢出的jumbotron。希望这有意义吗？

以下是相关代码：

<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浮动，因此不是一个真正的块。

Answer 2

你的内容刚刚溢出。将overflow: auto;添加到您的部分。

<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;overflow: auto;">

响应缩放部分不使用bootstrap jumbotron缩放

2 个答案: