Question

我正在尝试创建一个水平的图像列表，并将图像标题放在图像下方（而不是在图像上方）。 Bootstrap 3有可能吗？（没有看到与文档相关的任何内容）

<h5 class="media-heading pull-left">One</h5>
<img class="media-object pull-left" src="{% static "/img/one.jpg" %}" alt="..." />
<h5 class="media-heading pull-left">Two</h5>
<img class="media-object pull-left" src="{% static "/img/two.jpg" %}" alt="..." />
<h5 class="media-heading pull-left">Three</h5>
<img class="media-object pull-left" src="{% static "/img/three.jpg" %}" alt="..." />

Answer 1

试试这个：

<div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>

Answer 2

试试这个：

＆＃13;

div {
    width: 100px;
    display: inline-block;
    position: relative;

}

img {
    width: 100%;
}

h5 {
    position: absolute;
    bottom: -20px;
    width: 100%;
    margin:0;
    text-align: center;
    background: #CCC;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
    <h5 class="media-heading pull-left">One</h5>
    <img class="media-object pull-left" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="..." />
</div>
<div>
    <h5 class="media-heading pull-left">Two</h5>
    <img class="media-object pull-left" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="..." />
</div>
<div>
    <h5 class="media-heading pull-left">Three</h5>
     <img class="media-object pull-left" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="..." />  
</div>

＆＃13;

媒体标题在图像的底部？

2 个答案: