Question

我正在使用Twitter Bootstrap项目为我的一个iPhone应用创建一个简单的（ish）网站。我用这个创建了一个完整的网站，发现它很容易使用，但我有一些问题媒体网格。

我正在尝试使用媒体网格类来实现一行3个图像。图像的宽度为280像素，总共为840像素。容器是940px宽，所以我有100px宽限用于填充等。我发现这非常难以做，因为当我查看网站它并排放置两个图像然后在下一行放置第三个。然而，有些异常现象出现了，这是;

当我通过FTP发布index.html及相关的css文件时，网站会显示两个并排的图像，然后是第一个图像下一行的第三个图像。
当我在'Coda'（Mac上的编辑器，我用来编写html和css）中预览网站时，网站看起来就像我想要的那样，所有3张图片并排放在一行。

我尝试了很多东西;

我尝试在CSS中编辑.media-grid样式，但它似乎对网站的外观没有任何影响。即使我有大量的边距或填充，它也不会因某种原因而改变？
我已经尝试将自己的id放到媒体网格类中，然后为这三个图像设置样式，然后自己设置样式，这对视觉效果没有影响。

我使用以下代码插入我的图片;

<div class="container">

  <ul class="media-grid" id="imagearray">
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>

我错过了CSS中的内容吗？我不熟悉CSS，所以有可能我忽略了什么？任何帮助将不胜感激。

Answer 1

要使默认样式正常工作，您需要使用<li>打包<a href>。

e.g。

<ul class="media-grid" id="imagearray">
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
</ul>

Twitter Bootstrap，造型和使用媒体网格类

1 个答案: