图像不会在引导程序 3 中的一行上对齐

Question

我目前正在使用模板设置引导网站，我有一个宽度相当大的徽标，有人告诉我最好将其分成 3 个单独的图像，以使它们作为名称更具响应性该公司是“直言不讳的解决方案”。我已经拆分了图像，当我将它们放入网站时，它们只是彼此堆叠，我试图使图像更小，但没有运气。我也尝试过使用和不使用.img-responsive 类。我会附上屏幕截图，但我不能抱歉。在此先感谢，丹。

这里是HTML代码

<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>

CSS

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

希望对你有帮助

Answer 1

把css改成：

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

或

.logo {
  font-size: 0;
}

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

Answer 2

要为所有 3 张图像添加边框（仍在等待澄清），只需将 Bootstrap 中包含的 .responsive 应用于 div。然后，您只需确保将display:inline-block; 添加到各个图像中以将它们彼此相邻放置。