Bootstrap 3.3.7“行"导致水平滚动条 [英] Bootstrap 3.3.7 "row" causing horizontal scroll bar

问题描述

好吧，我知道.这个问题已经问了很多.但是，到目前为止，我还没有找到可行的解决方案.我将页面煮沸了，除了以下内容:

Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this:

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

并且仍然有一个水平滚动条.在开发工具中，我可以找到row:

And there is still a horizontal scroll bar. In dev tools, I can find the row:

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

如果我单击margin-right: -15px;，则问题就消失了.但是，在我的实际页面(包含所有内容)上，这又带来了另一个问题.该页面的页边距必须为零，但现在右边距为15px.

And if I un-click margin-right: -15px; then the problem goes away. But, on my actual page (with all of the content) this creates another problem. The page needs to have zero margins, but it now was a 15px margin on the right.

答案之一此处悲伤包裹与.另一个人说将其包装在container中.这些都确实使滚动条消失了，但是它们还给出了页边距，这是我所没有的.

One of the answers here sad to wrap row with container-fluid. Another said to wrap it in container. Both of these did make the scroll bar go away, but they also give the page side margins, which I can't have.

我发现线程最早可以追溯到2013年.还没解决吗?

I've found threads discussing this as far back as 2013. Is this really not fixed yet?

我需要做什么?

也:小提琴

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

推荐答案

首先，如果您的部分为100％宽，则不需要row或col-*12类，请查看

First of all you don't need row or col-*12 classes if your section is 100% wide look at this bootstrap example they have not taken any row or col-*12 neither with header nor jumbotron. If your section has column Just take row inside col-* classes for example

<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

这篇关于Bootstrap 3.3.7“行"导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！