引导程序缩略图显示不正确

Bootstrap thumbnails not displaying correctly

本文关键字：不正确 显示 略图 引导程序      更新时间：2023-09-26

我正在使用meteor框架开发流星应用程序。我添加了twbs:bootstrap包来实现快速CSS原型。我目前无法在屏幕上显示一组缩略图。

以下是JS Fiddle上的示例源代码：

<ul class="thumbnails">
    <li class="span4">
        <a class="thumbnail" href="#">
            <img src="http://placehold.it/300x200" alt="300x200" />                
            <h4 class="caption">This is my image</h4>
        </a>
    </li>
</ul>

https://jsfiddle.net/M3fpA/46/

正如您所看到的，它如预期的那样工作。现在，我已经将这段确切的源代码复制到我的项目中，只是为了进行演示。我的前端是这样的：

屏幕截图（对不起，显然我不允许直接在这里发布图片来帮助你们…）

这显然很混乱，但我似乎不明白为什么。以下是用于此页面的模板的来源：

<template name="inventory">
  <h1>Inventory</h1>
  <ul class="thumbnails">
      <li class="span4">
          <a class="thumbnail" href="#">
              <img src="http://placehold.it/300x200" alt="300x200" />
              <h4 class="caption">This is my image</h4>
          </a>
      </li>
  </ul>
</template>

您在示例和jsfiddle中使用的是Bootstrap 2.3.2标记，但在添加twbs:bootstrap时，它将加载3.3.5版本的最新Bootstrap，因此出现了问题。

您不应该使用这样一个旧版本的引导程序，因为版本3已经存在了近2年，请参阅当前的引导程序缩略图文档。

相关文章：