在引导程序中使用容器流体会导致水平滚动条 [英] using container-fluid within bootstrap cause horizontal scrollbar

问题描述

这是一个简单的例子:

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

小提琴演示

当我在浏览器中看到结果时，我会看到一个水平滚动条.

为什么会这样?

我做错了什么?

解决方案

container-fluid 最初是从 Bootstrap 3.0 中取出来的，但是 在 3.1.1 中重新添加

要解决此问题，您可以要么:

1. 使用较新版本的 Bootstrap 样式表

   使用 Fiddle 中的新样式表进行演示

2. 或者自己加入班级

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

   要解决此问题，您需要向 .container-fluid 类添加填充

   .container-fluid {padding-right: 15px;左边距:15px；右边距:自动；左边距:自动；}

   在 Fiddle 中使用自定义容器类的演示

Here is a simple example:

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

Demo in Fiddle

When I see the result in browser I get a horizontal scrollbar.

Why is this happening?

What am I doing wrong?

解决方案

container-fluid was originally taken out of Bootstrap 3.0, but added back in 3.1.1

To fix this, you can either:

1. Use the newer version of Bootstrap style sheet

   Demo with New Style Sheet in Fiddle

2. Or add in the class yourself

   The .row adds a 15px margin to the left and right. Since .container-fluid fills up 100% of the screen width, the extra margin space causes overflow issues.

   To fix this, you need to add padding to .container-fluid class

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

   Demo with Custom container class in Fiddle

这篇关于在引导程序中使用容器流体会导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！