Question

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

希望这有帮助

Answer 1

将css更改为：

.logo img {
  display: block;
  float: left;
  height: auto;
}

OR

.logo {
  font-size: 0;
}

.logo img {
  display: inline-block;
  height: auto;
}

Answer 2

要在所有3个图像周围添加边框（仍在等待澄清），只需将Bootstrap中包含的.responsive应用于div。然后，您只需确保将display:inline-block;添加到单个图像中，以将它们放在一起。

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

2 个答案: