Question

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

当我在我的页面上运行它时，它们不是出现在同一行中的3个图像，而是显示在不同行的中心。

＆＃13;

<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>

＆＃13;

Answer 1

此代码使用 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

为什么我的缩略图不会出现在同一行？

1 个答案: