Twitter Bootstrap 和 iPad

Question

我正在学习使用Twitter Bootstrap，它在桌面上运行良好，并且响应式也很好。假设我正在使用span8和span4，我无法强制iPad纵向视图将span4堆叠在span8下方。

我在头部区域有正确的标签，viewport和响应式CSS文件。

有什么想法吗？

更新：

这是我的代码。当我缩小网页浏览器窗口时，我可以看到它如何响应式（最终span4会被移动到span8下方）。如果我在iPad上处于纵向模式，则不希望span8和span4相互并排，而是希望先显示span8，然后再在其下方显示span4。

在头部区域：

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

- Giventoflyfish

---

你能否使用jsfiddle或者更好的响应式设计方式来使用row-fluid呢？链接请参考http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem。 - Arpit Srivastava

Answer 1

请按照以下方式安排： 示例Jsfiddle 在问题的新说明之后，请使用以下样式表或编写您自己的媒体查询，如下所示：

@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%;
 }
}

在头部部分，使用Bootstrap 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>

- Shail

---

我更新了我的代码，我觉得它是正确的，并且我添加了另一个关于我在尝试做什么的说明。谢谢您的回答。 - Giventoflyfish

您需要编写媒体查询 ... 我会稍后更新答案。 - Shail

@Giventoflyfish 请更新答案，麻烦检查一下。 - Shail

Shail，谢谢！那个有效！我需要审查一下为什么，但是这行得通。 - Giventoflyfish

@Giventoflyfish 请记住，如果您想要为平板电脑、移动设备或iPhone自定义任何内容，请使用媒体查询。 - Shail

起初我以为响应式设计是内置在Twitter Bootstrap中的。 - Leniel Maccaferri