Twitter Bootstrap、样式和使用媒体网格类答案

【问题标题】：Twitter Bootstrap, styling & using media-grid classTwitter Bootstrap、样式和使用媒体网格类
【发布时间】：2011-12-26 02:11:58
【问题描述】：

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

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

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

我尝试了很多东西；

我尝试在 CSS 中编辑 .media-grid 样式，但它似乎对网站的外观没有影响。即使我有大量边距或填充，它也不会因某种原因而改变？
我尝试将我自己的 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，所以我可能忽略了一些东西？任何帮助将不胜感激。

【问题讨论】：

编辑：我现在已经设法通过减小图像的宽度来连续获得所有三个图像。但是，它们都在左侧是合理的。我试过 margin-left: auto;和边距右：自动；而且完全不影响。

标签： html css twitter-bootstrap

【解决方案1】：

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

例如

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

【讨论】：