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

首先，如果您的部分是100％宽，那么您不需要row或col-*12类，请查看this bootstrap示例，他们没有采用任何row或col-*12 {strong>标题和 jumbotron 都不是col-*。如果您的部分有列，请在<div class="col-sm-6"> <div class="row">stuff</div> </div> <div class="col-sm-6"> <div class="row">stuff</div> </div>类中取行，例如

container-fluid

<强> Fiddle

或者如果您使用的是<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>

pesudo elements

<强> Fiddle

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

引导程序 5.0 [2021 年 4 月]

工作和测试 ✔

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

我的情况是我必须在 row 内使用 container-fluid 并且 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 6

为什么不使用容器液并完全去除边缘？

<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

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

6 个答案:

引导程序 5.0 [2021 年 4 月]