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如何制作响应/折叠行？

回答

相关问题