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

前端之家收集整理的这篇文章主要介绍了css – 使用容器流体在引导引起水平滚动条前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这里有一个简单的例子: @H_502_2@<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类中添加填充

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

Demo with Custom container class in Fiddle

猜你在找的CSS相关文章