Question

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

Answer 1

这可以通过在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; 
}

Answer 2

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

之后导入

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

Bootstrap如何制作响应/折叠行？

2 个答案: