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/

enter image description here

Answer 1

你的文字比它的父文章宽（这叫做溢出）。默认情况下，溢出是可见的，这会导致滚动条出现。

来自MDN：

overflow属性指定是否剪辑内容，渲染滚动条或仅在溢出其块级别时显示内容容器

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

例如：

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

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

最小宽度滚动条

1 个答案: