Twitter Bootstrap、样式和使用媒体网格类 [英] Twitter Bootstrap, styling & using media-grid class

问题描述

我正在使用 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 类中，然后为我自己设置样式，这对视觉效果也没有影响.

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

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

我在 CSS 中遗漏了什么吗?我对 CSS 不流利，所以我可能忽略了一些东西?任何帮助将不胜感激.

解决方案

要使默认样式正常工作，您需要使用 .

例如

<li><a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a><li><a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a><li><a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>

I am creating a simple(ish) website for one of my iPhone apps using the Twitter Bootstrap project. I have created a full website with this and found it quite easy to use but I am having some issues media-grid.

I am trying to achieve a row of 3 images using the media-grid class. The images are 280px in width which gives me 840px in total. The container is 940px wide so I have 100px grace to use for padding etc. I am finding this extremely difficult to do as when i view the site it puts two images side by side then the third on the next row. Some anomalies are showing up though, which are;

• When I publish the index.html and associated css file via FTP the website displays the images with two side by side then the third image on the next row underneath the first.
• When I preview the website in 'Coda' (the editor on Mac I am using to write the html and css) the website looks exactly how I want it too with all 3 images side by side in one row.

I have tried a number of things;

1. I have tried editing the .media-grid styles in the CSS and it doesn't seem to make a difference to how the site looks. Even if I had massive margins or padding it doesn't alter for some reason?
2. I have tried putting my own id onto the media-grid class for the three images then styling then myself which also has no impact on the visuals.

I have used the following code to insert my images;

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

Am I missing something in the CSS? I am not fluent with CSS so it is possible I am overlooking something? Any help would be appreciated.

解决方案

To get the default styling to work correctly you need to wrap the <li>s with an <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、样式和使用媒体网格类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！