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

如何水平对齐Bootstrap缩略图

4 个答案: