Bootstrap如何製作響應/摺疊行？

我是新來Twitter的Bootstrap，並不能解決這個問題..我有以下代碼。當我改變屏幕寬度（即移動寬度）時，我如何實際摺疊這些行落在彼此之下。目前它只是將行擠壓在一起，不會將行放在彼此之下。任何代碼來幫助將不勝感激。Bootstrap如何製作響應/摺疊行？

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap test</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 

</head> 

<body> 
<h1>Hello, world!</h1> 

<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 



    <div class="row-fluid"> 
     <div class="span4" style="overflow:auto">Column 1</div> 
     <div class="span4">Column 2</div> 
    <div class="span4">Column 3</div> 
    </div> 

<div class="row-fluid"> 
     <div class="span3">Column 1</div> 
     <div class="span3">Column 2</div> 
    <div class="span3">Column 3</div> 
    <div class="span3">Column 4</div> 
    </div> 

<div class="row-fluid"> 
     <div class="span12">Column 1</div> 
    </div> 

</body> 
</html>

來源

2013-03-19 Daniel Kellaway

這是通過在您的CSS中設置Media Queries的樣式來實現的。

@media only screen and (min-width: 768px) and (max-width: 959px) {} 
@media only screen and (max-width: 767px) {} 
@media only screen and (min-width: 480px) and (max-width: 767px) {}

對這些css片段中的元素進行樣式化以獲得所需的效果。

例如;讓我們來說說下海誓山盟的元素。手機視圖：

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    #divid { 
    width: 100%; 
    min-height: 100px; 
    float: left; 
    position: relative; } 
    background: black; 
}

來源

2013-03-19 08:05:11 Jefferson

檢查樣式表導入的順序，以及它們是否存在於文件夾中。響應者應在主文件後輸入

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

來源

2013-05-14 09:02:54 user2267880

Bootstrap如何製作響應/摺疊行？

回答

相關問題