Bootstrap grid給出黑線

Question

我剛開始使用Bootstrap。從我讀過的東西，這段代碼應該執行沒有任何問題：

HTML

<div class="container"> 
    <div class="row"> 
     <div id="page" class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 "> 
      <div id="header"></div> 
      <div id="article"></div> 
      <div id="footer"></div> 
     </div> 
    </div> 
</div> 

相反而COL-LG，我得到一條黑線，和MD到SM，我得到全屏。

CSS

#page { 
    background: black; 
    width: auto; 
    height: 500px; 
} 

Width: auto應覆蓋整個LG-網格大小。爲什麼會有像10-20像素的垂直線，當我縮小頁面時，它變成了全屏？

在col-sm-12期間它應該覆蓋整個頁面。但在col-md期間，它應該在開始時有1個網格線偏移量，10個網格線爲黑色，最後爲1個空白線。 和col-lg 2格偏移，8格黑和2格空。

我知道容器有一些預設值，但仍然不應該影響12個網格系統。

預先感謝您。

Answer 1

不要給cols一個寬度。他們有已經一個，從Bootstrap 計算寬度。這是網格系統的核心，也是它的響應能力。

如果你想要的東西給一個寬度或高度做內山坳：

<div class="container"> 
    <div class="row"> 
     <div class="col-..."> 
      <div id="page"> 
       <div id="header"></div> 
       <div id="article"></div> 
       <div id="footer"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

您面臨的問題導致您通過使用ID＃頁面應用寬度爲css：auto爲col- *。但bootstrap對於每個col- *都有一個固定的寬度，以用於響應的某個斷點。所以，你的「寬度：自動」的原因不適用於視口寬度大於767px，這就是爲什麼你只是「黑線」。

當視口小於768像素時，引導程序會從所有變爲全角的col- *中移除寬度，這就是爲什麼您會爲較小的屏幕/窗口/視口獲取全黑色div。

我不確定我是否能夠很好地解釋它。所以，如果你仍然有問題。只是評論。