我正在使用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/
如您所见，它按预期工作。现在我将这段确切的源代码复制到我的项目中仅用于演示目的。它在我的前端看起来像这样：
Screenshot （对不起，显然我不允许直接在这里发布图片来帮助你们......）
它显然很混乱，但我似乎无法理解为什么。以下是此页面使用的模板的来源：
<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>
答案 0 :(得分：0)
您在示例和jsfiddle中使用的是Bootstrap 2.3.2标记，但是在添加 $(document).ready(function(){
var userAnswer = parseInt(prompt("Enter an number between 1 and 60"));
var squares = "<div class='square'></div>";
var squareCount = userAnswer * userAnswer;
var dimensions = 960 / userAnswer;
for(var i = 0; i < squareCount; i++ ){
$(".the-grid").append(squares);
}
$(".square").width(dimensions);
$(".square").height(dimensions);
// Create normal color
function normalColor(){
$(".square").hover(function(){
$(this).css("background-color","#513684");
});
}
// Create trail color
function trailColor(){
$(".square").hover(function(){
$(this).css({
"background-color":"#000",
"opacity":"1"
});
}, function(){
$(this).fadeTo(10000,0);
});
}
// Create Random Color
function randomColor(){
$(".square").mouseenter(function(){
var hex = [1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];
var hexColor = "#";
for(var i = 0; i < 6; i++){
var randomHex = Math.floor(Math.random() * 15);
hexColor += hex[randomHex];
}
$(this).css("background-color",hexColor);
});
}
//Clear grid
function clearGrid(){
$("#clear-button").click(function(){
$(".square").css("background-color","transparent");
});
}
// Events
$("#random-color").on("click",function(){
$(".header").off("click","#color-button",normalColor);
$(".header").off("click","#trail-color",trailColor);
randomColor();
});
$("#color-button").on("click",function(){
$(".header").off("click","#random-color",randomColor);
$(".header").off("click","#trail-color",trailColor);
normalColor();
});
$("#trail-color").on("click",function(){
$(".header").off("click","#random-color",randomColor);
$(".header").off("click","#color-button",normalColor);
trailColor();
});
$("#clear-button").on("click",clearGrid);
});
时，它将加载3.3.5版本的最新Bootstrap，因此存在问题。
你不应该使用这样一个旧版本的Bootstrap，因为版本3已经存在了将近2年，请参考current Bootstrap thumbnails documentation。