Question

我已经看过这些解决方案（同样的问题）：

Stackoverflow Question 2013
GitHub problem 2013

但是没有，除了丑陋的

body { overflow-x: hidden;}

我刚刚从他们的网站（v3.3.4）下载了当前的bootstrap发行版。它还有这个.container-fluid类，它应该是解决这个问题的方法。但是，我仍然遇到这个问题，想知道其他人是否也遇到过这个问题。我在localhost中遇到了这个问题（使用MAMP）。我还没有尝试过生产服务器，因为我很困惑为什么这个问题仍然存在。我决定发布这个问题，就像几年前提出的问题一样。

我的代码设置非常基础（我也使用了container类）：

<div class="container-fluid">
    <div class="row">
      <div class="col-md-3 column">
      </div>
      <div class="col-md-6 column">
      </div>
      <div class="col-md-3 column">
      </div>
    </div>
</div>

Answer 1

只需修改引导程序CSS：

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

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

试试。

Answer 2

Came across this while having issues with another bootstrap trick, I understand it's old but thought I'd answer it for those in the future.

The problem is that you are using row AFTER the container.

If you're trying to nest rows, you're doing it incorrectly but from your code that's not how it appears. If you are just trying to get your screen to be at 100% width all you need to do is move your .row above .container-fluid.

<div class="row">
  <div class="container-fluid">
    <div class="col-md-3 column">
      </div>
      <div class="col-md-6 column">
      </div>
      <div class="col-md-3 column">
      </div>
    </div>
</div>

Although this question is a little vague this should fix that issue.

Answer 3

我有同样的问题，上面没有帮助...

我只是将overflow: hidden放到我所有容器的父div中并且工作得很好。

在我的情况下，父div是<div class="hfeed site" id="page">

Bootstrap .container＆gt; .row水平滚动问题

3 个答案: