Html 引导：内联获取三个缩略图图像

我一直在尝试多种方法让这件事工作，但似乎没有任何工作。我只想有三个缩略图与一点空间内联

例如：用户名：thumbnailimage1 thumbnailimage1 thumbnailimage1

<div class="row">

    <div class="thumbnail">
            <c:if test="${completedRec.goldCompleted > 0}">
                <img src="<c:url value="/img/gold.png"/>"  width="40">
            </c:if>
            <c:if test="${completedRec.silverCompleted > 0}">
                <img src="<c:url value="/img/silver.png"/>" width="40">
            </c:if>
            <c:if test="${completedRec.bronzeCompleted > 0}">
                <img src="<c:url value="/img/bronze.png"/>" width="40">
            </c:if>                             
    </div>
</div>

“width=”40“>
“width=”40“>
“width=”40“>

---

我正在使用jsp，在这里我有一个信息列表，我在列表上迭代来绘制信息。我可以找出其余的部分，但我似乎无法水平内联图像。如何使用引导在css中实现这一点。我尝试了缩略图选项和多个堆栈溢出，但没有任何效果。

关于引导布局：

.缩略图类只进行格式化（边框、填充）；图像的对齐实际上是从.row和.col-md-3类进行的

使用Bootstrap将您自己的CSS与他们的CSS混合，以处理他们不提供的布局时，这是可以的。在这种情况下，以下是一些CSS可能会有所帮助：

.thumbnails img {
    float: left;
    margin-right: 10px;
    display: block;
}

这将与：

<div class="thumbnails">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

例如：

我使用了.thumbnails以避免与Boostrap.thumbnails冲突。这意味着您可以混合搭配以获得Boostrap的外观和感觉：

<div class="thumbnails">
    <img class="thumbnail" src="..." />
    <img class="thumbnail" src="..." />
    <img class="thumbnail" src="..." />
</div>

---

示例：

您可以尝试使用多个div来获得所需的结果

<div class="row">
<div class="col-md-3">
</div>

<div class="col-md-3">
img
</div>

<div class="col-md-3">
img
</div>

<div class="col-md-3">
img
</div>
</div>

img
img
img

如果我使用您提到的img css，样式是否会应用于我使用的所有其他img标记。是的，您可以使选择器更精确以避免此问题：。缩略图img{…}所以，当我使用它时，我会这样做？我如何摆脱边界？边界来自于与bootstrap自身的冲突。缩略图…我用一些更好的示例更新了我的答案，以说明如何避免这种冲突！