3

我正在尝试学习使用 Twitter 引导程序。它适用于桌面和响应式工作。假设我正在使用 span8 和 span4。我不知道如何强制 iPad 纵向视图将 span4 堆叠在 span8 下。

我在头部、视口和响应式 CSS 文件中有正确的标签。

有任何想法吗？

更新：

这就是我所拥有的。当我缩小 webbrowser 窗口时，我可以看到它是如何响应的（最终 span4 在 span8 下移动）。如果我在 iPad 上处于纵向模式，不希望 span8 和 span4 堆叠在一起，而是希望 span8 然后 span4 堆叠在 span8 下方。

在标题中

<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap-responsive.css">

在体内

<div class="container">
<div class="row">
<div class="span8">
<?php while ( have_posts() ) : the_post() ?>
<h4><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php    the_title( ); ?></a></h4>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<div class="span4">
hello this is a test to see if columns are fluid.
</div>
</div>
</div>

在页脚

<script src="./js/bootstrap.js"></script>
4

1 回答 1

3

按以下方式排列： Jsfiddle with example

在新的问题解释之后，请在您的样式表中使用以下内容或编写您自己的媒体查询，如下所示：

@media (min-width: 768px) and (max-width: 979px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
 }
}

在标题部分引导 css（云托管版本）

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> /*bootstrap css with responsive css as well */

<link href="/css/style.css" rel="stylesheet"> /*your custom stylesheet*/

在身体使用以下：

    <div class="row">
<div class="span4">Content</div>
<div class="span8">content</div>
</div>

在页脚：

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
于 2013-02-24T15:27:46.907 回答