引導網格問題

我想用Bootstrap建立一個簡單的頁面。我現在的問題與網格系統有關。引導網格問題

我需要一個主div包含兩個div。所以我創建了一個row-fluid的主類。內部兩個div分別被給予soan4和span8的類別。我現在的問題是兩個div沒有正確顯示。請看看最終的結果：http://i61.tinypic.com/2rgneci.png

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sticky footer &middot; Twitter Bootstrap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- CSS --> 
    <style type="text/css"> 

    .border{ 
     border: 2px solid; 
    } 
    </style> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="row-fluid"> 

     <!-- sidebar start --> 
     <div class="sidebar border span4" > 
      1 </div> 
     <!-- sidebar end --> 

     <!-- content start --> 
     <div class="blogBody border span8"> 
      2 </div> 
     <!-- content end --> 

    </div><!-- main div end --> 
    </body> 
</html>

來源

2014-08-31 Loai Nagati

引導程序的哪個版本是？ o.O 看看這個http://getbootstrap.com/css/#grid 在那裏你有正確的文檔。據我所知，沒有「span8」 - 「soan4」CSS選擇器 – Frondor 2014-08-31 14:41:00

是的，將它改爲col - ** - *表示法。問題仍然存在 – 2014-08-31 20:54:45

由於引導3語法改變：跨度開不存在，現在它的COL-width_wanted-number_of_columns 這樣對你是這樣的：

<div class="row-fluid"> 
<div class="sidebar border col-xs-4" > 
1 
</div> <!-- sidebar end --> 
<!-- content start --> 
<div class="blogBody border col-xs-8"> 
2 
</div> <!-- content end --> 
</div><!-- main dev end -->

http://jsfiddle.net/z22oxbap/

更多的ressource看看這裏：http://getbootstrap.com/css/#grid 編輯：

-xs-爲超小型設備（< 768px）寬度 -sm-爲小型設備之間（≥768px）和（< 992px）寬度 -md-爲桌面設備之間（≥992px）和（< 1200像素）寬度 -lg-適用於大於（≥1200像素）寬度的大型設備

來源

2014-08-31 14:40:49 Core972

+1，但值得一提的是，'-xs-'適用於移動設備，如果沒有其他類，則繼承到更大的設備：*網格類適用於屏幕寬度大於或等於斷點大小的設備，並覆蓋針對較小設備的網格類。因此，將任何.col-md-類應用於元素不僅會影響其在中型設備上的樣式，而且在不存在.col-lg-類的大型設備上也會影響它。* – DanFromGermany 2014-08-31 14:43:51

您是對的，感謝您的建議。我編輯過。 – Core972 2014-08-31 14:54:49

試過了。兩個內部div浮動到左側：http://i57.tinypic.com/140ad1i.png – 2014-08-31 15:57:56

引導網格問題

回答

相關問題