Bootstrap 3.3.7“行”导致水平滚动条

Question

好的好的，我知道了。这个问题被问了很多。但是，到目前为止，我还没有找到一个可行的解决方案。我将我的页面归结为以下内容：

<div class="row">
    <div class="col-sm-12">
        stuff
    </div>
</div>

还有一个水平滚动条。在开发工具中，我可以找到row：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

如果我取消点击margin-right: -15px;，问题就会消失。但是，在我的实际页面（包含所有内容）上，这会产生另一个问题。页面需要有零边距，但现在右边有 15px 的边距。

答案之一here 很遗憾将row 与container-fluid 包装起来。另一个说用container 包装它。这两个确实使滚动条消失了，但它们也提供了页面边距，这是我不能拥有的。

我发现 threads 早在 2013 年就在讨论这个问题。这真的还没有解决吗？

我需要做什么？

还有：小提琴

https://jsfiddle.net/oLx4g8e3/1/

Answer 1

引导 5.0 [ 2021 年 4 月]

工作和测试 ✔

如果你们中的一些人使用 bootstrap 5，您可以使用 overflow-hidden 来解决这个问题。我刚刚遇到并登陆了这个页面。我认为它可能对某些人有帮助。

我的情况是我必须在container-fluid 内使用row，而row 没有触及我想要的浏览器边缘。当我添加px-0 时，我得到水平滚动条。

要解决此问题，您可以使用内置类 overflow-hidden 到 container-fluid

<div class="container-fluid px-0 overflow-hidden">
    <div class="row">
        <div class="col">
            <!-- your text -->
        </div>
    </div>
</div>

来源：https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters

Answer 2

如果有人在 Bootstrap v4 中遇到这个问题。 只需将m-0 添加到您的 div 中即可。

<div class="row m-0"></div>

Answer 3

一种更简单的方法是简单地删除违规行的边距：

.row {
    margin-left: 0px;
    margin-right: 0px;
}

Answer 4

您是指当容器应该是流体时出现在页面底部的滚动条吗？您的页面中可能有一个元素扩展了屏幕的宽度。

我通常使用this Chrome extension 来查看哪些 CSS 元素超出了应有的范围。

另外，看看这个Fiddle 是否有帮助（下面的代码）。

<div class="container-fluid">
 <div class="row">
  <div class="col-sm-12">
Lorem Ipsum is simply dummied text of the printing and typesetting industry.
  </div>
 </div>
</div>

Answer 5

为什么不使用容器流体并完全去除边距？

<div class="container-fluid" style="margin: 0">
   <div class="row">
      <div class="col-md-6">

      </div>
      <div class="col-md-6">

      </div>
   </div>
</div>

或者使用width: 100%围绕它创建自己的div

Answer 6

首先你不需要row 或col-*12 类，如果你的部分是100% 宽看this 引导示例他们没有采取任何row 或col-*12 也没有标题 或 jumbotron。如果您的部分有列，请在 col-* 类中取行，例如

<div class="col-sm-6">
    <div class="row">stuff</div>
</div>
<div class="col-sm-6">
    <div class="row">stuff</div>
</div>

Fiddle

或者如果你使用container-fluid

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">stuff</div>
        </div>
        <div class="col-sm-6">
            <div class="row">stuff</div>
        </div>
    </div>
</div>

Fiddle