自舉網格不顯示

我有問題讓自舉網格正確顯示。我的代碼如下自舉網格不顯示

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

我看到的是： grid

任何人都知道這裏發生了什麼？我已經包含了bootstrap.css，bootstrap-theme.css和bootstrap.js。其他的東西，如按鈕，通過bootstrap進行正確的格式化。

來源

2016-08-29 RubyJ

這是正確的結構，並且您的屏幕截圖看起來不錯。這個結構應該將行分成兩列，就像你的截圖所示。 – Vcasso

據我看到你的2 div的格式應該是他們應該的？（使用Boostraps md-6）。

你不要在你的div需要.col-md-6值，但：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6">Your text here</div> 
      <div class="col-md-6">Your text here</div> 
     </div> 
</div>

欲瞭解更多有關Grid Templates

檢查出的官方引導文檔頁面的文檔中使用的網格視圖（grid.css ）添加以下CSS：

h4 { 
    margin-top: 25px; 
} 
.row { 
    margin-bottom: 20px; 
} 
.row .row { 
    margin-top: 10px; 
    margin-bottom: 0; 
} 
[class*="col-"] { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color: #eee; 
    background-color: rgba(86,61,124,.15); 
    border: 1px solid #ddd; 
    border: 1px solid rgba(86,61,124,.2); 
} 

hr { 
    margin-top: 40px; 
    margin-bottom: 40px; 
}

來源

2016-08-29 19:51:46 Daniel

我似乎無法弄清楚爲什麼網格本身並沒有實際顯示。根據我發佈的鏈接，這只是在白色背景上的文字。沒有顏色，沒有網格。 – RubyJ

.col-md-6的值僅用於測試 – RubyJ

您預期會發生什麼？我想你已經誤解了Bootstrap列的功能 – Daniel

Bootstrap make a N「看不見」的網格，如果你想看到這樣的說法，如果你想使電網可見，你可以用CSS做，要麼添加背景色或邊框，我最喜歡的是背景色：

CSS：

.y0 { background-color: #CCC; } 
.y1 { background-color: #9FF; } 
.y2 { background-color: #F9F; } 
.y3 { background-color: #F99; } 
.y4 { background-color: #FF6; } 
.y5 { background-color: #3C3; }

HTML：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6 y0">Your text here</div> 
      <div class="col-md-6 y1">Your text here</div> 
     </div> 
</div>

來源

2016-08-29 20:14:14 Chico3001

修改如下

<div class="container show-grid"> 
     <div class="row"> 
      <div class="col-md-6">.col-md-6</div> 
      <div class="col-md-6">.col-md-6</div> 
     </div> 
</div>

以下CSS添加到y我們的樣式表

.show-grid div{ 
    border:1px solid ; 

}

來源

2016-08-29 20:33:18 Aravind

自舉網格不顯示

回答

相關問題