在引导程序中使用容器流体导致水平滚动条

Posted 2023-02-22

【中文标题】在引导程序中使用容器流体导致水平滚动条

【英文标题】：using container-fluid within bootstrap cause horizontal scrollbar

【发布时间】：2014-07-09 04:59:43

【问题描述】：

这是一个简单的例子：

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

Demo in Fiddle

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

为什么会这样？

我做错了什么？

【参考方案1】：

container-fluid最初是从Bootstrap 3.0中取出来的，但是added back in 3.1.1

要解决此问题，您可以任一：

使用newer version of Bootstrap 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

【讨论】：

更新引导程序（从 3.0.0 到 3.3.7）对我来说是最简单的方法。像魅力一样工作！

auto 边距不是必需的。

【参考方案2】：

我也遇到过这个问题。我不知道问题的原因。这可能是来自Twitter Bootstrap 的错误。现在，我必须手动将overflow-x:hidden 添加到我的body 标签：

body  
   overflow-x: hidden;

Jsfiddle

【讨论】：

Lvarayut，有趣的解决方法。真正的问题是 Bootstrap v3.0 根本不包含.container-fluid！打开你的控制台，看看有多少匹配的规则出现，或者通过样式表 Ctrl + F。最简单的解决方法是获取 3.1 版的最新样式表

这个解决方案非常好，谢谢！奇怪的是，在 body 左右添加 5px 边距对我来说也是一样的，同时仍然让网站组件完全“触摸”画布的边缘（使用 24 列和 15px 间距）

您应该注意，此解决方法仅隐藏滚动条，您的布局仍然可以“左右移动”。如果您的目标设备是平板电脑或移动设备，那么这将成为一个问题，因此您的页面访问者在向下滚动时将您的网站向左移动。恕我直言，糟糕的用户体验；）

非常感谢！对于移动设备，我还必须添加 overflow-x: hidden;到 html 也是如此。

【参考方案3】：

在我的情况下，这个修复效果很好：

.row 
  margin-left: 0;
  margin-right: 0;

【参考方案4】：

.row
margin: 0px;

快速轻松解决这就是您所需要的一切

【讨论】：

你成就了我的一天！

【参考方案5】：

确保用容器封装你的行类。

<div class="container">
    <div class="row">
        text
    </div>
</div>

容器用+15 偏移行上的-15 边距。

【讨论】：

这个答案会导致页面不是全宽的。如果您使用的是流体，那就是这样的想法，不是吗？

我发现在容器流体中添加我的行就可以了

【参考方案6】：

您可以通过将新类添加到全宽行并创建覆盖 css 文件来破坏该行：

.noLRMar
  margin-right: 0 !important;
  margin-left: 0 !important;
 

<div class="row noLRMar">
  
 </div>

【讨论】：

Bootstrap 4 具有内置的 mx-0 类，可以做到这一点。

【参考方案7】：

就我而言，将@grid-gutter-width 更改为奇数会导致这种情况，因为；

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) 
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);

所以如果你选择一个奇怪的gutter-width，那么你最终会得到不均匀的填充，你会看到一个水平滚动条。

【参考方案8】：

我遇到了同样的问题，单独使用 .container-fluid 会创建水平滚动，但我使用嵌套的 .container 修复了它，希望对您有所帮助！

<div class="container-fluid">
    <div class="container">
    </div>
</div>

【讨论】：

您重复了一个已经多次给出的答案，这是错误。使用.container-fluid 的全部意义在于让.row 扩大视口的整个宽度。将.row 包装在.container 中会破坏使用.container-fluid 的目的。此外，可以通过在.container-fluid 上设置15px 的左右填充（以抵消.row 的负边距）或将Bootstrap 从v3.0 升级到v3.3.7（其中包含填充修复）来解决此问题）。作为侧节点，在这种情况下不需要自动边距。

【参考方案9】：

使用 Bootstrap 3.3.5，在从中等 (md) 到小 (sm) 屏幕尺寸的变化附近，我得到了一个特定宽度的水平滚动条。在我的div.container-fluid 和div.container 之间添加div.row 为我修复了它。

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

将margin:0; 添加到您的行会破坏一些样式元素。

【讨论】：

这是不正确的。根据引导文档，只有列应该是行的直接子级。并且行不能是另一行的孩子。来自 Bootstrap 的文档：“内容应该放在列中，并且只有列可以是行的直接子级。”

【参考方案10】：

在容器类中设置 max-width 而不是宽度。它将删除单杠。

.container-fluid  
    border:1px solid red;
    max-width:1349px;
    min-height:1356px;
    padding:0px;
    margin:0px; 

【讨论】：

这没有意义。您正在使用 .container-fluid 因为您不想拥有最大宽度。