javascript - 如何在 twitter bootstrap 中使图像组合响应？

Question

我想将以上五张不同的图片合并在一起，因为这是网页的标题部分。

我使用了 lavalamp 插件并且它可以工作，但是网页失去了响应能力。在不同的设备上，标题不会显示在一行中。

我试图将它插入到 Bootstrap 中。我在 bootstrap CSS 文件中插入了 lavalamp CSS 代码行，如下所示:

.lavaLampWithImage {
    margin-top:10px;
    position: relative;
    height: 55px;
   /* width: 734px;*/
    /*width:780px;*/
}

.lavaLampWithImage li {
    float: left;
    list-style: none;
}

.lavaLampWithImage li.back {
    background: url("res/arrow.png") no-repeat right -30px;
    z-index: 0;
    padding-top:59px;
    padding-left:40px;
    position: absolute;
}

.lavaLampWithImage li.back .left {
    background: url("res/arrow.png") no-repeat top left;
    height: 30px;
}

.lavaLampWithImage li a {
    z-index: 20;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
}

.mm {
    border:0px; 
}

#navbar {
    /*margin-left:152px;*/  
    /*padding-top:60px;*/
    padding-top:1px;
    /*width:727px;*/
}

相关的HTML代码部分如下:

<div class="span6">
    <div id="navbar">
        <ul class="lavaLampWithImage" id="1">
            <li><a href="index.html"><img class="mm" src="res/1.png" width="300" height="60" alt="home" onClick="location.href='index.html'"/></a></li> 
            <li class="current"><a href="index.html"><img class="mm" src="res/Home-n.png" width="120" height="60" alt="home" onClick="location.href='index.html'"/></a></li>
            <li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img class="mm" src="res/blog.png" width="120" height="60" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></a></li>
            <li><a href="help.html"><img class="mm" src="res/Help-n.png" width="120" height="60" alt="about us" onClick="location.href='help.html'"/></a></li>
            <li><a href="contactus.html"><img class="mm" src="res/Contact_us-n.png" width="120" height="60" alt="contact us" onClick="location.href='contactus.html'"/></a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

如何让它响应？

请尽快回复

提前致谢。

Answer 1

首先从图像标签中删除特定的宽度和高度，如下所示:

<li><a href="index.html"><img class="mm" src="res/Home-n.png"  alt="home" onClick="location.href='index.html'"/></a></li>

然后在css中写:

@media only screen and (max-width:720px){
    .lavaLampWithImage li img {
        max-width:100%;
    }
}

并在此媒体查询中以百分比形式给出 li 元素的特定宽度。