3

Twitterブートストラップの使い方を学ぼうとしています。デスクトップでうまく機能し、レスポンシブな作品です。たとえば、span8 と span4 を使用しているとします。iPad のポートレート ビューを強制的に span4 を span8 の下にスタックする方法がわかりません。

ヘッド セクション、ビューポート、レスポンシブ CSS ファイルに正しいタグがあります。

何か案は？

更新しました：

これが私が持っているものです。Web ブラウザー ウィンドウを縮小すると、応答性が向上することがわかります (最終的には、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 に答える