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

Question

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

23

好的好的，我知道。这个问题被问了很多次。但是迄今为止，我还没有找到一个可行的解决方案。我把页面简化成了这样：

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

仍然存在水平滚动条。在开发工具中，我可以找到row：

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

如果我取消勾选margin-right: -15px;，那问题就解决了。但是，在我的实际页面上（包括所有内容），这会造成另一个问题。页面需要具有零边距，但现在右侧有一个15像素的边距。

这里的一个答案建议用container-fluid包装row。另一个人说要用container包装它。这两个方法确实使滚动条消失了，但它们也给页面带来了侧边距，而我不能有侧边距。

我发现自2013年以来就有讨论此问题的主题。这个问题还没有修复吗？

我需要做什么？

另外：Fiddle

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

- Casey Crookston

将另一行放在列内即可解决问题 https://jsfiddle.net/oLx4g8e3/3/ - Ismail Farooq

8个回答

19

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

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

- Arsen Ablaev

5

更简单的方法是只需在有问题的行上删除边距：

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

- aalaap

2

由于Bootstrap 5是最新版本且目前广泛使用，因此我将直接跳到Bootstrap 5。

更新于2022年12月

已测试通过Bootstrap 5.2 ✔
已测试通过Bootstrap 5.1 ✔
已测试通过Bootstrap 5.0 ✔

Bootstrap 5

如果您正在使用Bootstrap 5，可以使用overflow-hidden来解决此问题。希望能帮助其他人。

我的情况是我必须在container-fluid中使用row，并且row没有触及我想要的浏览器边缘。当我添加px-0时，会出现水平滚动条。

在查阅文档后，我发现了overflow-hidden。

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

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

- Dexter

2

你是在说当容器应该是流动性的时候，页面底部出现滚动条吗？可能是页面中的某个元素扩展了屏幕的宽度。

我通常使用 这个 Chrome 扩展程序 来查看哪些 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>

- Robert Dewitt

是的，我在谈论出现在页面底部的滚动条。（为了明确起见更新标题）。请参见fiddle，在我的OP中除了HTML之外没有任何内容。谢谢！ - Casey Crookston

此外，您的fiddle在两侧有边距，而我不能有（正如我在原帖中所说）。 - Casey Crookston

1

让我澄清一些事情-为什么页面不能有边距？ - Robert Dewitt

一个公平的问题。回答：因为客户说“没有边距” :-) 有图形内容需要延伸到屏幕边缘。 - Casey Crookston

啊，我明白了！Flexbox可能真的适合你在这里的需求。让我链接这篇文章，关于flexbox没有边距的问题。我很确定这会与Bootstrap很好地结合。 - Robert Dewitt

显示剩余3条评论

0

为什么不使用 container-fluid，彻底去掉边距呢？

<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 包裹它

- Pascal Hannemann

我在fiddle上尝试了这个。它仍然有侧边的边距。 - Casey Crookston

我稍后会在fiddle上尝试一些东西，我正在使用手机。我曾经遇到过同样的问题，并尝试了很多方法，其中大部分都有效;) - Pascal Hannemann

0

在我的特定情况下，我必须将 .container 从 "width: 100%" 更改为 "width: initial"。

  .container {
    width: initial;
  }

如果您需要保持宽度为100％，您可以尝试使用box-sizing：border-box;

  .container {
    box-sizing: border-box;
  }

- Casey Plummer

0

在我的情况下，我注意到我的导航栏溢出了。

使用Angular绑定：

<div class="row" [style]="{'width': '100%'}">
    <div class="col-12">
        (Your content here)
    </div>
</div>

或者内联：

<div class="row" style="width:100%">
    <div class="col-12">
        (Your content here)
    </div>
</div>

这解决了我的问题。

- Vinicius Bernardo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ismail Farooq · Accepted Answer

首先，如果您的部分宽度为100％，则不需要row或col-*12类，请参考此bootstrap示例，他们没有使用任何row或col-*12，无论是在头部还是巨幅广告中。如果您的部分具有列，请在col-*类中使用row，例如：

<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