css - 为什么我的缩略图没有出现在同一行？

我正在尝试使用AngularJS中的Bootstrap创建基本的图片库。我在这里遵循一个教程：http://www.tutorialspoint.com/bootstrap/bootstrap_thumbnails.htm，但是我已经看到许多其他站点使用相同或相似的代码。

当我在页面上运行它时，它们没有出现在同一行中隔开的3张图像，而是全部出现在单独的行的中心。

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="" class="thumbnail">
            <img class="r" src="../Images/Test1.png" >
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="" class="thumbnail">
            <img class="" src="../Images/Test2.png" >
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="" class="thumbnail">
            <img class="" src="../Images/Test3.png" >
        </a>
    </div>
</div>

最佳答案

此代码使用Bootstrap框架，您可能会忘记导入它！

确保您具有这些导入，并且代码将按预期运行：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

这是证明，一旦导入引导程序，此html就能正常工作：

LIVE DEMO

关于css - 为什么我的缩略图没有出现在同一行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29223285/