0

Twitter Bootstrap でシンプルな流動的な Web レイアウトを作成したいと思います。コンピューターでは次のように表示されます。

コンピュータのレイアウト

モバイル デバイスでは次のようになります (画像を 2 つの場所に分割することはオプションですが、推奨されます)。

モバイルレイアウト

私が作成したときは、Firefox の Fluid レイアウト ビューでは完全に動作しますが、Android を搭載したモバイルでは見た目が異なります。

Android での表示:

ここに画像の説明を入力

これらの 2 つのリストは、何らかの理由で同じ行にとどまっています。

コード：

<div class="row-fluid">
  <div class="span2">
    <img><br>
    <img>
  </div>

  <div class="span10">
    <p>text</p>

    <ul class="span5">
      <li>bullet</li>
      <li>bullet</li>
      <li>bullet</li>
    </ul>
    <ul class="span5">
      <li>bullet</li>
      <li>bullet</li>
      <li>bullet</li>
    </ul>
  </div>

  <div class="span12">
    <p>other text</p>
  </div>
</div>

または、クラス メディアを使用する必要がありますか? 画像のメディアオブジェクトと残りのメディアボディ?

4

1 に答える 1

0

コード ブロックでネストされた行を開始しました

<div class="span10">
<p>text</p>
<ul class="span5"> 
....
</ul>
<ul class="span5"> 
....
</ul>

Bootstrap グリッドが正しく機能するために必要なことは、 

<div class="container-fluid">
 <div class="row-fluid">

  <div class="span2">
   <img><br>
   <img>
  </div> <!-- end span 2 -->

<div class="span10">
 <p>text</p>

 <div class="row-fluid"> <!-- start nested row -->

  <ul class="span6">
   <li>bullet</li>
   <li>bullet</li>
   <li>bullet</li>
  </ul>

  <ul class="span6">
   <li>bullet</li>
   <li>bullet</li>
   <li>bullet</li>
   </ul>

  </div> <!-- end nested row -->

  </div><!-- end span10 -->

  <div class="span12">
  <p>other text</p>
  </div><!-- end span12 -->

 </div><!-- end row-fluid -->

 </div><!-- end container -->

ネストされた流動的な行の場合、ネストされた列のスパンを 10 ではなく 12 まで追加する必要があります。詳細については、流動的なネスティング @ http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystemを参照してください。

幸運を！

于 2013-05-25T15:55:02.100 に答える