html - 最小宽度滚动条

Question

我很难弄清楚为什么我的内容在最小页面宽度下会生成带有 Bootstrap 3 的滚动条。我已将代码缩小到以下内容，但我不太清楚确定是什么原因造成的。我已经做了很多事情来尝试修复它，但我无法指责它。

<div ng-view="">
    <div class="section-a">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-10 col-lg-push-1 col-xs-12 text-right">
                    <button type="button" class="btn btn-default feedback-top">Feedback</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="forward">
                         <h1>Header</h1>

                         <h2>Header2</h2>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-d">
        <div class="container-fluid">
            <div class="row vertical-align">
                <div class="col-lg-6 col-lg-offset-1 col-xs-12 text-center">Here is some text</p>
                    <p class="lead">Here is some more text</p>
                </div>
                <div class="col-lg-4 col-sm-12 col-xs-12 text-center">
                    <button type="button" class="btn "btn-default">Feedback</button>
                </div>
            </div>
        </div>
    </div>
</div>

这是问题的屏幕截图和 jsfiddle，我们将不胜感激:https://jsfiddle.net/hzjuoksg/1/

Answer 1

您的文本比其父文本宽(这称为溢出)。默认情况下，溢出是可见的，这会导致出现滚动条。

来自MDN :

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

如果您不希望您的内容溢出，请使用overflow: hidden。

例如:

.section-a {
    background-color: red;
    overflow: hidden;
}
.section-b {
    background-color: blue;
    overflow: hidden;
}

jsFiddle:https://jsfiddle.net/hzjuoksg/2/