Html 赢得图像'；t在bootsrap 3中的一行上对齐

我目前正在使用一个模板建立一个bootstrap网站，我有一个宽度相当大的徽标，有人告诉我，最好将其拆分为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更改为：

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

或

---

要在所有3个图像周围添加边框（仍在等待澄清），只需将引导中包含的

.responsive

应用到div即可。然后，您只需确保添加

显示：内联块以使它们彼此相邻。
我们需要更多信息。请在您的帖子中发布您的HTML和CSS。您希望边框围绕所有3个图像还是围绕每个图像？您可能不需要拆分图像。。。此外，您的html没有img响应类，我希望它们周围都有边框@LeoJwedaYeah@Huangism我把它拿了出来，忘了加进去。如果去掉每个img标记之间的空白，你可以避免字体大小：0。我可以想到一些可能导致它不起作用的事情。不幸的是，如果没有更多关于代码的详细信息，我无法消除足够多的代码，将它们全部列出太单调了。
.logo img {
  display: block;
  float: left;
  height: auto;
}

.logo {
  font-size: 0;
}

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