Twitter引導和iPad

我試圖學習使用Twitter引導。它適用於桌面和響應式作品。假設我正在使用span8和span4。我無法弄清楚如何強制iPad縱向視圖在span8下堆疊span4。Twitter引導和iPad

我在頭部部分，視口和響應CSS文件中有正確的標記。

任何想法？

更新：

這是我的。當我縮小網頁瀏覽器窗口時，我可以看到它是如何響應的（最終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>

來源

2013-02-24 Giventoflyfish

你可以jsfiddle或更好地響應使用'行流體'鏈接http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem – 2013-02-24 14:31:40

排列以下列方式： 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-24 15:27:46 Shail

我更新了我的代碼，我認爲我有它正確的，我添加了另一種解釋我正在嘗試做什麼。謝謝回答。 – Giventoflyfish 2013-02-24 16:33:16

你將不得不爲它編寫媒體查詢。我會稍微更新答案 – Shail 2013-02-24 16:49:54

@Giventoflyfish更新答案plz檢查。 – Shail 2013-02-24 17:10:36

Twitter引導和iPad

回答

相關問題