1

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

我正在尝试使用 media-grid 类实现一行 3 张图像。这些图像的宽度为 280 像素，总共给了我 840 像素。容器的宽度为 940 像素，因此我有 100 像素的宽限可用于填充等。我发现这非常难以做到，因为当我查看该站点时，它会并排放置两个图像，然后将第三个图像放在下一行。但是出现了一些异常情况，它们是；

  • 当我通过 FTP 发布 index.html 和关联的 css 文件时，网站会显示两个并排的图像，然后在下一行显示第三个图像。
  • 当我在“Coda”（我用来编写 html 和 css 的 Mac 上的编辑器）中预览网站时，网站看起来完全符合我的要求，所有 3 张图像并排排成一排。

我尝试了很多东西；

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

我使用以下代码插入我的图像；

<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，所以我可能忽略了一些东西？任何帮助，将不胜感激。

4

1 回答 1

2

要使默认样式正常工作，您需要将<li>s 用<a href>.

例如

<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>
于 2011-11-28T14:16:19.623 回答