如何使图像组合在Twitter Bootstrap中响应？

Question

我想加入以上五个不同的图像，因为这是网页的标题部分。

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

我试图将其插入引导程序。 我在引导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

首先，从您的图片标签中删除特定的宽度和高度，例如bellow：

<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元素的特定宽度。

Answer 2

我不是100％肯定您所说的响应式图像是什么意思。 但是，如果您只是想根据屏幕宽度调整图像大小，可以尝试执行以下操作：

.lavaLampWithImage {
    margin:10px 0 0;
    padding:0;
    display:block;
    position: relative;
    width:100%;
}
.lavaLampWithImage li {
    display:inline-block;
    list-style: none;
    background-color:green;
    width:15.38%;
}
.lavaLampWithImage li:first-child {
    width:38.45%;
}
.lavaLampWithImage li a, .lavaLampWithImage li a img {
    display:block;
    width:100%;
}

和html：

<div class="span6">
    <div id="navbar">
        <ul class="lavaLampWithImage" id="nav1">
            <li><a href="index.html"><img class="mm" src="http://www.upsdell.com/BrowserNews/img/ban_300x60.png" alt="home" onClick="location.href='index.html'"/></a></li><li class="current"><a href="index.html"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="home" onClick="location.href='index.html'"/></a></li><li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></a></li><li><a href="help.html"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="about us" onClick="location.href='help.html'"/></a></li><li><a href="contactus.html"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='contactus.html'"/></a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

这是一个jsfiddle