css – 使用容器流体在引导引起水平滚动条

这里有一个简单的例子：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Demo in Fiddle

当我在浏览器中看到结果，我得到一个水平滚动条。

为什么会发生这种情况？

我究竟做错了什么？

解决方法

容器流体最初是从Bootstrap 3.0，但是 added back in 3.1.1

要解决此问题，您可以：

>使用newer style sheet

Demo with New Style Sheet in Fiddle
>或者添加类中自己

.row向左和右添加了15px的边距。由于.container-fluid填满屏幕宽度的100％，额外的空白空间会导致溢出问题。

要解决这个问题，需要在.container-fluid类中添加填充

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Demo with Custom container class in Fiddle

原文地址：https://www.jb51.cc/css/221266.html