bootstrap：内联获取三个缩略图答案

【问题标题】：bootstrap: Get three thumbnail images inlinebootstrap：内联获取三个缩略图
【发布时间】：2014-08-11 22:47:10
【问题描述】：

我一直在尝试多种方法来让这个东西工作，但似乎没有任何工作。我想简单地将三个缩略图内联并留出一点空间。

例如：用户名：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，其中有一个信息列表，我遍历列表以绘制信息。我可以弄清楚其余部分，但我似乎无法将图像水平内联。如何使用引导程序在 css 中执行此操作。我尝试了缩略图选项和多个stackoverflow，但没有任何效果。

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

关于 Boostrap 布局：

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

.thumbnail 类只进行格式化（边框、填充）；图像的对齐实际上是在 .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>

示例：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/

【讨论】：

如果我使用您提到的 img css，该样式是否会应用于我使用的所有其他 img 标签。
是的，您可以使选择器更精确以避免此问题：.thumbnail img { ... }
所以当我使用它时，我会这样做
?
如何摆脱边框？
边界来自与引导程序自己的 .thumbnail 的冲突......我已经用一些更好的例子更新了我的答案，以展示如何避免这种冲突！

【解决方案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>

【讨论】：