html - twitter bootstrap 缩略图在 Chrome + Windows XP 以外的任何地方都没有正确对齐

标签 html css twitter-bootstrap

好吧,我正在制作一个工作网站的原型(prototype),但在使用缩略图作为 Twitter Bootstrap 的一部分时遇到了一个小问题

我的问题很容易发现并且适用于我测试过的所有浏览器但是 Chrome 20.0.1132.57(官方内部版本 145807)m 在 Windows XP SP3 上。

如果您转到该页面,您可能会看到如下内容: enter image description here 然而,当我在 Windows + Chrome 上检查时,所有缩略图都正确排列(左侧第二行没有空格。)见下文 enter image description here

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

<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: 1-308-856-4636<br>
             Fax: 1-308-856-4641 </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: 1-701-788-8927</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: 1-320-974-8337<br>
             Fax: 1-320-974-8837</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: 1-740-852-4137<br>
             Fax: 1-740-852-4729</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: 1-419-643-5111<br>
             Fax: 1-419-643-4762</address>
        </p>
        <a href="http://www.essicompanies.com" class="btn btn-primary" target="_blank">Website</a><a href="mailto:sales@essicompanies.com" 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: 1-270-886-8857<br>
             Fax: 1-419-643-4762</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: 1-320-367-2881<br>
             Fax: 1-320-367-2879</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: 1-402-947-9881<br>
             Fax: 1-402-947-9801</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: 1-217-286-3280</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 文件我做了一些非常小的更改(链接颜色和选项卡/背景颜色的东西)但与缩略图或网格系统无关。

请提供任何帮助,我在这里真的很挠头。

最佳答案

给他们高度修复它:

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

关于html - twitter bootstrap 缩略图在 Chrome + Windows XP 以外的任何地方都没有正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11476503/

相关文章:

javascript - 刷新网页后保留变量的值

JavaScript Enter 键不传递输入值

html - Font Awesome 图标不适用于 Chrome 应用程序

javascript - 通过 JS 启动 CSS 转换不起作用

javascript - 如何将 css 添加到 jquery backstretch?

css - Bootstrap 不适用于开发中的 Rails 4.2.4 应用程序

javascript函数不断刷新页面

css - Bootstrap 表数据行被放大

html - 在没有表格的情况下以表格样式显示段落

html - 无法让 CSS 划分相互匹配,即使它们是相同的