0

我是 Twitter 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>
4

2 回答 2

1

这是通过在 CSS 中设置媒体查询的样式来实现的。

@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-19T08:05:11.073 回答
0

检查样式表导入的顺序以及它们是否存在于文件夹中。响应式的应该在主文件之后导入

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
于 2013-05-14T09:02:54.563 回答