Bootstrap列抛出html宽度

Question

我正在构建一个Angular2应用程序，我正在使用占用整个页面宽度的组件。当我在我的组件的html文件中有这个时，页面很好：

<div class="row">
    (literally nothing in here)
</div>

但是当我在这一行旁边添加一个col-md-12 div时，我的html被抛出并变得对于页面来说太宽而且允许我水平滚动，这是我不想做的：

<div class="row">
    <div class="col-md-12">
        (literally nothing in here)
    </div>
</div>

非常感谢任何有关如何解决此问题的帮助。

Answer 1

当您想要使用容器的整个宽度时，请始终使用container-fluid而不是col-md-12，这是您正在寻找的修复程序。来自Bootstrap doc：

  

将.container-fluid用于全宽容器，跨越视口的整个宽度。

Answer 2

首先，您应该将<div class="row">标记包裹在<div class="container">或<div class="container-fluid">中，就像这样。

<div class="container">
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</div>

在这种情况下，请使用container-fluid，这样您的内容就可以跨越整个屏幕宽度。