html - 如何将图像放在移动段落旁边。响应式 Twitter Bootstrap

Question

我正在为我的网站寻找符合以下内容的内容，即使在移动布局中，我也希望文本旁边有一个图像的小缩略图:

但是，移动设备上的默认 Bootstrap 行为是将所有 div 一个一个地排列在另一个下方。 img 似乎全宽并且文本在其下方流动，这是不可取的。

bootstrap 中是否内置了一些东西可以让我获得预期的结果，或者我是否必须使用一些自定义 CSS？

Answer 1

Bootstrap styles are based on grid system, you don't need to write custom styles for this. You can use span classes to achieve your requirement

如果你正在使用流体布局，你可以使用这样的东西

<div class="span6">
  <div class="span6">
     here your image code
   </div>
   <div class="span6">
     here your description
   </div>                  
  </div>
</div>

如果你使用的是固定布局

<div class="span6">
  <div class="span3">
     here your image code
   </div>
   <div class="span3">
     here your description
   </div>                  
  </div>
</div>

您可以根据页面宽度选择span class

更新:

检查这个 fiddle :

http://jsfiddle.net/wLxen/3/

更多信息http://twitter.github.com/bootstrap/scaffolding.html#gridSystem