Question

我一直在尝试多种方法让这件事情起作用，但似乎没有任何效果。我想简单地让三个缩略图内联一点点空间。

例如：username：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>

我正在使用jsp，我有一个信息列表，我遍历列表来绘制信息。我可以把剩下的东西弄清楚，但我似乎无法将图像水平内嵌。我如何使用bootstrap在css中执行此操作。我尝试了缩略图选项和多个stackoverflow，但没有真正有效。

Answer 1

关于Boostrap布局：

http://getbootstrap.com/components/#thumbnails

.thumbnail类只进行格式化（边框，填充）;图像的对齐实际上是从.row和.col-md-3类发生的。

使用Bootstrap将自己的CSS与他们混合使用时，可以处理他们没有提供的布局。在这种情况下，这里有一些可能有用的CSS：

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

适用于：

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

示例：http://jsfiddle.net/sifriday/kg5uewqt/

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

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

示例：http://jsfiddle.net/sifriday/kg5uewqt/1/

Answer 2

您可以尝试使用多个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>

bootstrap：内联三个缩略图

2 个答案: