Bootstrap 3：缩略图标题文本换行到第二行使容器高度拉伸答案

【问题标题】：Bootstrap 3: Thumbnail caption text wrapping to second line makes container height stretchBootstrap 3：缩略图标题文本换行到第二行使容器高度拉伸
【发布时间】：2014-09-15 13:20:49
【问题描述】：

Bootstrap 2 也存在同样的问题，但没有得到解答。希望对于 Bootstrap 3 会有人胜任这项任务:-)。请注意，还有另一个问题。在较低的屏幕分辨率下，文本不仅会破坏容器形状，还会破坏容器。
提前致谢！
我有以下代码：

    <div class="col-md-1">
    <a class="thumbnail" href="islauncher:C:\Program Files\Microsoft Office\Office14\POWERPNT.exe">
    <img alt="PowerPoint" src="/sites/hedevenv/AppImages/PowerPoint.jpg">
    <div class="caption" style="align-content: center;">PowerPoint</div>
    </a>
    </div>

【问题讨论】：

好吧，我不知道上下文是什么，也不知道你为什么要使用 col-md-1，但根据你的示例，Bootstrap 完全按照预期工作。你是对的，在某些时候，正好是 80 像素，“PowerPoint”这个词与容器重叠，但我无法想象你可以使用哪个设备，宽度是 80 像素。请参阅 bootply.com/8TNBYzWXvq 添加更多文本以及它如何完全按预期工作。如果这不是您的意思，请重新编写您的问题，添加上下文和任何其他 CSS
我正在使用 col-md-1 来放置一些带有应用程序图标的缩略图。它们看起来像屏幕上的应用程序，每个都有一个标题。

标签： html css twitter-bootstrap-3

【解决方案1】：

解决方法：我通过以下方式解决了这个问题： 1. 每个 col-md-1 之间的边距（下、左、右）为 20px。 2. 将标题放在容器外，在其下方，并为每个标题另外留出 10 像素的下边距。

现在看起来一切正常，但是如果您在每个缩略图周围没有 20px 并且您不能将标题放在下面的情况下，最好能获得其他想法。

【讨论】：