如何删除引导程序中的水平滚动？

Question

今天，我有一个bootstrap问题。

喜欢这张图片。

我想删除网格引导程序中的水平滚动。

我认为问题在于：我尝试添加一张幻灯片图片，其中新的div.container > div.row包含一个小孩div.container > div.row，我认为这个问题..

我的代码是这样的：

<div class="container">
    <div class="row">
        <div class="container">
            <div class="row"></div> <!-- /.row contain image slider-->
        </div> <!-- /.container contain image slider -->
    </div> <!-- /.row contain content of page-->
</div> <!-- /.container contain content of page-->

但我不知道如何解决这个问题。

你可以在这里看到我的笔：

http://codepen.io/r0ysy0301/pen/zKoPAE

Answer 1

您无法在不更改容器宽度的情况下插入容器 INSIDE 。容器本身具有最小宽度。参考：http://getbootstrap.com/css/#grid-options

如果您非常想要使用容器，请使用容器 - 液体。

参考：http://getbootstrap.com/css/#grid-example-fluid

这是编辑过的html代码。希望能帮助到你。

http://www.bootply.com/IsEptxFAGG

Answer 2

问题是您的.container元素中有2个嵌套的.tab-pane div元素。 .container类有一个mediaquery，它明确地设置其宽度，使其大于tab-pane。

@media (min-width: 1200px)
.container {
    width: 1170px;
}

您可以通过几种不同的方式解决它：

1. 您可以将.tab-pane上的溢出从overflow-y: auto更改为overflow-x: hidden，这不是一个很好的解决方案，因为它只是简化内容。

- 或 -

1. 您可以使用不同的类而不是.container，这样您就不会在不同的断点处绑定所有显式宽度。

Answer 3

只需定义布局流体的类别，并删除水平可可杠即可

<div class="container-fluid">