Bootstrap列拋出html寬度

Question

我正在構建一個Angular2應用程序，我正在使用佔用整個頁面寬度的組件。當我有這個在我的組件的HTML文件的頁面是好的：

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

但是，當我在旁邊添加一個col-md-12格此行，我的HTML會遭到削減，變得太寬的頁面，讓我水平滾動，這是我不想要的：

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

任何有關如何解決這個問題的幫助，我們將不勝感激。

Answer 1

首先，你應該換你的<div class="row">標籤<div class="container"> OR <div class="container-fluid">，像這樣。

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

在這種情況下，使用container-fluid這將使你的內容橫跨屏幕的整個寬度。

Answer 2

當您要使用容器的全部寬度時，始終使用container-fluid而不是col-md-12，這是您正在尋找的修復程序。從Bootstrap doc：

對於全寬度容器使用.container-fluid，跨越視口的整個寬度。