Css 一排缩略图在Chrome中可以正常工作，但在Firefox（引导程序）中不行_Css_Html_Twitter Bootstrap

Css 一排缩略图在Chrome中可以正常工作，但在Firefox（引导程序）中不行

css html twitter-bootstrap

Css 一排缩略图在Chrome中可以正常工作，但在Firefox（引导程序）中不行,css,html,twitter-bootstrap,Css,Html,Twitter Bootstrap,我有以下片段：一排简单的缩略图。它在Chrome中看起来不错，但在Firefox/IE中却不起作用我做错什么了吗？我相信页面中的所有内容都应该是跨浏览器兼容的。您的图像很大，并且这些图像位于类中。btn类具有显示：内联块-这意味着按钮将扩展以适应您的图像接下来，.span3是有响应的，这个span宽度会根据您的屏幕大小而变小/变大，而不是您的带有图像的.btn 解决方案：您可以通过将btn设置为块级别来修复它。应用类btn块 <body> <d

我有以下片段：

一排简单的缩略图。它在Chrome中看起来不错，但在Firefox/IE中却不起作用

我做错什么了吗？我相信页面中的所有内容都应该是跨浏览器兼容的。

您的图像很大，并且这些图像位于

类中。btn

类具有

显示：内联块

-这意味着按钮将扩展以适应您的图像

接下来，

.span3

是有响应的，这个span宽度会根据您的屏幕大小而变小/变大，而不是您的带有图像的

.btn

解决方案： 您可以通过将btn设置为块级别来修复它。应用类

btn块

<body>
    <div class="row">
        <ul class="thumbnails">
            <li class="span3">
                <button type="button" class="btn btn-block">
                    <img class="img-rounded" src="http://s15.postimg.org/gn3znajvf/img1.png"/>
                </button>
            </li>
            <li class="span3">
                <button type="button" class="btn btn-block">
                    <img class="img-rounded" src="http://s17.postimg.org/4wx50qtin/img2.png"/> 
                </button>
            </li>
        </ul>
    </div>
</body>

演示：

你说它不工作是什么意思？在什么情况下，你的小提琴也完全空了。缩略图彼此重叠：css在哪里

UL

元素在没有样式时显示一个垂直列表这里没有额外的CSS，只是引导。

<body>
    <div class="row">
        <ul class="thumbnails">
            <li class="span3">
                <button type="button" class="btn btn-block">
                    <img class="img-rounded" src="http://s15.postimg.org/gn3znajvf/img1.png"/>
                </button>
            </li>
            <li class="span3">
                <button type="button" class="btn btn-block">
                    <img class="img-rounded" src="http://s17.postimg.org/4wx50qtin/img2.png"/> 
                </button>
            </li>
        </ul>
    </div>
</body>