我目前正在使用模板设置一个bootstrap网站,我有一个宽度相当大的徽标,有人告诉我最好将它分成3个单独的图像,以使它们更具响应性,因为名称该公司是“Straight Talking Solutions”。我把图像分开了,当我把它们放到网站上时,它们只是堆叠在一起,我试图让图像更小,但没有运气。我也尝试过有.img-responsive
类和没有<div class="col-sm-4 col-md-4 logo">
<a class="logo" href="index.html">
<img alt="logo" title="straight talking solutions" src="img/STS/straight.png" class=""/>
<img alt="logo" title="straight talking solutions" src="img/STS/talking.png" class=""/>
<img alt="logo" title="straight talking solutions" src="img/STS/solutions.png" class="" />
</a>
</div>
类。我会附上一个屏幕截图,但我不能抱歉。在此先感谢Dan。
Html Code Here
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Css
{{1}}
希望这有帮助
答案 0 :(得分:0)
将css更改为:
.logo img {
display: block;
float: left;
height: auto;
}
OR
.logo {
font-size: 0;
}
.logo img {
display: inline-block;
height: auto;
}
答案 1 :(得分:0)
要在所有3个图像周围添加边框(仍在等待澄清),只需将Bootstrap中包含的.responsive
应用于div。然后,您只需确保将display:inline-block;
添加到单个图像中,以将它们放在一起。