如何水平对齐Bootstrap缩略图

Question

我知道这是一个愚蠢的问题，但是有人可以告诉我如何水平排列Bootstrap thumbnails吗？

目前，缩略图是垂直放置的（一个在另一个下面）。

这是我的两个缩略图的代码段。

<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="...">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row"> 
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="...">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>

这是屏幕快照的放置方式。

Answer 1

删除<div class="row"> div及其相应的结束标记。 现在，您正在通过使用它们来将它们强制为单独的“行”，因此是垂直排列。

Answer 2

您创建了两个“行”。 而是尝试以下方法：

<div class="row">
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
</div>

Answer 3

删除第二行并添加一些CSS，以使缩略图具有固定的宽度和内联流。

编辑 ：添加了一些CSS，以实现没有图像的背景色。

 .thumbnail { border:1px black solid; width:180px; display:inline-block; background-color:white; height:300px; } .green-space { margin:3px; height:150px; background-color:#3ECE30; } .green-space .empty-space { height:120px; } .green-space h3 { font-size:16px; font-family:Myriad Pro; color:white; background-color:#1F641A; text-align:center; height:22px; line-height:22px; } .caption { position:relative; height:calc(100% - 150px); text-align:center; } .caption .btn{ position:absolute; bottom:10px; left:50%; margin-left: -45px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail" style="display:inline-block"> <div class="green-space"> <div class="empty-space"> </div> <h3>Software Name</h3> </div> <div class="caption"> <p>...</p> <a href="#" class="btn btn-default btn-ok" role="button">Read More</a> </div> </div> <div class="thumbnail" style="display:inline-block"> <div class="green-space"> <div class="empty-space"> </div> <h3>Software Name</h3> </div> <div class="caption"> <p>...</p> <a href="#" class="btn btn-default btn-ok" role="button">Read More</a> </div> </div> </div> </div> 

Answer 4

删除第二行div和其上方的关闭div，它们将彼此相邻。

<div class="row"> creates a new row