如何水平對齊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