图像不会在bootstrap 3中的一行上对齐

时间:2014-02-06 20:02:29

标签: html css image twitter-bootstrap

我目前正在使用模板设置一个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}}

希望这有帮助

2 个答案:

答案 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;添加到单个图像中,以将它们放在一起。