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