1

我正在为我的网站寻找以下内容，即使在移动布局中，我也想要文本旁边的图像小缩略图：

一种

但是，移动设备上的默认引导行为是将所有 div 流到另一个之下。img 似乎全宽，文本在其下方流动，这是不可取的。

引导程序中是否有内置的东西可以让我达到预期的结果，还是我必须使用一些自定义 CSS？

4

2 回答 2

0

Bootstrap 样式基于网格系统，您无需为此编写自定义样式。您可以使用跨度类来满足您的要求

如果您使用的是流体布局，您可以使用类似这样的东西

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

您可以根据页面宽度选择跨度类

更新：

检查这个小提琴：

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

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

于 2013-04-04T05:29:13.547 回答
0

我想我会从一年前回答我自己的问题，因为它已经被浏览了超过一千次。然后我也可以将其标记为已回答。

在由移动设备构建的 Boostrap v3 中，有用于移动设备的类“.col-xs-*”，它可以让您指定并排放置而不是堆叠的内容。

如果它们在没有 Bootstrap 3 或旧版本的 bootstrap 3 的情况下工作，显然可以创建这些媒体查询或样式。请参阅bootstrap 文档或代码。

于 2014-12-12T17:55:13.917 回答