Twitter引导程序缩略图在Chrome + Windows XP以外的任何地方均无法正确对齐 [英] twitter bootstrap thumbnails not aligning properly anywhere but Chrome + Windows XP

问题描述

好，所以我正在为一个工作网站制作原型，并且在Twitter Bootstrap的一部分中使用缩略图遇到了一个小障碍

Ok so I'm prototyping a site for work and I have run into a small snag using the thumbnails as part of Twitter Bootstrap

我的问题很容易看到，并且适用于我测试过的每种浏览器 但是 Chrome 20.0.1132.57(官方内部版本145807)m .

My issue is very easy to see and is applicable in every browser I've tested but Chrome 20.0.1132.57 (Official Build 145807) m on Windows XP SP3.

如果转到该页面，则可能会看到类似以下内容的信息:但是，当我在Windows + Chrome浏览器上检查此缩略图时，所有缩略图均正确排列(左侧第二行中没有空格.)请参见下文

If you goto the page you will likely see something like this: however When I check this on Windows + Chrome the thumbnails all line up properly (no whitespace on the second row on the left.) see below

这是我使用的标记(我已经看过三次了，看不到错误..所以我会把它全部贴出来，以防万一它格式不正确?):

Here is the markup I used (I've looked it over thrice now and cannot see a mistake.. so i'll post it all incase it somehow is malformed?):

<ul class="thumbnails">
    <li class="span3" id="c4">
    <div class="thumbnail vcard">
        <h4>AG Dryer Services, Inc.</h4>
        <p>
            <address>
            234 N. Tyler street<br>
             P. O. Box 450<br>
             Elm Creek NE 68836, USA<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone] </address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c5">
    <div class="thumbnail vcard">
        <h4>Advanced Grain Handling</h4>
        <p>
            <address>
            823 Main St West<br>
             Mayville ND 58257, USA<br>
            <br>
             Phone: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c6">
    <div class="thumbnail vcard">
        <h4>Whitcomb Brothers Crane Service</h4>
        <p>
            <address>
            16710 90th Ave<br>
             Atwater MN 56209, USA<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c8">
    <div class="thumbnail vcard">
        <h4>Sims Construction Co.</h4>
        <p>
            <address>
            1860 St Rt 56 SW<br>
             London OH 43140, USA<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c10">
    <div class="thumbnail vcard">
        <h4>Elevator Services &amp; Storage, Inc.</h4>
        <p>
            <address>
            312 W Main St.<br>
             Beaverdam, OH 45808, USA<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone]</address>
        </p>
        <a href="http://www.essicompanies.com" class="btn btn-primary" target="_blank">Website</a><a href="mailto:[e-mail]" class="btn btn-success">Email</a>
    </div>
    </li>
    <li class="span3" id="c12">
    <div class="thumbnail vcard">
        <h4>General Steel Crane &amp; Rigging</h4>
        <p>
            <address>
            P.O. Box 1078<br>
             Hopkinsville KY 42241<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c7">
    <div class="thumbnail vcard">
        <h4>Northern Grain Design &amp; Const.</h4>
        <p>
            <address>
            8015 highway 7, SE<br>
             Clara City MN 56222, USA<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c9">
    <div class="thumbnail vcard">
        <h4>Miller Agri. Sales</h4>
        <p>
            <address>
            103 Sycamore<br>
             Friend NE 68359, USA<br>
            <br>
             Phone: [phone]<br>
             Fax: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c11">
    <div class="thumbnail vcard">
        <h4>Innovative Electrical Solutions. LLC.</h4>
        <p>
            <address>
            11 W. Wilson<br>
             P.O. Box 202<br>
             Henning IL 61832, USA<br>
            <br>
             Phone: [phone]</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
</ul>

和bootstrap css文件我做了一些非常小的更改(链接颜色和带有选项卡/背景色的内容)，但是与缩略图或网格系统无关.

and the bootstrap css file I have made some very minor changes (link colours and stuff with the tabs/background colours) but nothing to do with thumbnails or the grid system.

请提供任何帮助，我真的在这里挠头.

Please any help would be appreciated, I'm really scratching my head here.

推荐答案

为它们提供高度可以解决此问题:

Giving them height fixes it:

.thumbnails > li {
    float: left;
    margin-bottom: 18px;
    margin-left: 20px;
    height: 200px;
}

这篇关于Twitter引导程序缩略图在Chrome + Windows XP以外的任何地方均无法正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！