我花了一些时间来弄清楚为什么我的内容在最小页面宽度下会使用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/

最佳答案

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

MDN


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


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

例如:

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


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

10-05 21:02
查看更多