简单的流体布局与图像 - FF和Android中不同的流体响应

Question

我想用Twitter Bootstrap创建一个简单的流畅网页布局。它应该在计算机上看起来像这样：

和移动设备上的相似（将图像分成两个位置是可选的，但更可取）：

当我创建它时，它在Firefox的Fluid布局视图中完美运行，但在移动设备上看起来与Android不同。

它在Android上的外观：

由于某种原因，这两个列表保持在同一行。

代码：

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

或者我应该使用课堂媒体？图像的媒体对象和其余的媒体 -

Answer 1

您已在代码块中启动了嵌套行

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

对于嵌套流体行，您希望嵌套列的跨度最多为12，而不是10。有关详细信息，请参阅流体嵌套@ http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem。

祝你好运！