Bootstrap v3缩略图问题

Question

我正在升级到Bootstrap v3并遇到缩略图问题。

这是我的代码：

<div class="row">
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
</div>

这就是它产生的东西：

如您所见，左手缩略图与内容不符。

Answer 1

Bootstrap使用12列网格。 3 * 6＆gt; 12。如果您希望列彼此相邻，则需要使用col-sm-4（4 * 3 = 12）：

<div class="row">
    <div class="col-sm-4">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
    <div class="col-sm-4">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
    <div class="col-sm-4">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
</div>

或者，如果您希望每个缩略图占据6列，请将它们分成两行：

<div class="row">
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
</div>

Answer 2

您错误地使用了row类。 row最多可包含12列。您正在向同一行添加3 * 6 = 18列。

添加另一行。

<div class="row">
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
<div class="row">
</div>
    <div class="col-sm-6">
        <div class="thumbnail">
            <!-- content -->
        </div>
    </div>
</div>