twitter-bootstrap - 带有图像的简单流体布局 - 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> 

您希望引导网格正常工作的是

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

祝你好运！