html - 如何使用 Bootstrap 连续在图像上制作文本？

Question

现在它没有响应，两张图片应该排成一行。我想在这些图像上制作像绘画和摄影这样的文字。怎么可能？

.caption {
  position: absolute;
  top: 9%;
  left: 11px;
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.caption1 {
  position: absolute;
  top: -51px;
  left: 11px;
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.imageandtext {
  position: relative;
}

<div class="grid-two imageandtext">
  <figure>

    <img src="http://lorempixel.com/300/300/" class="img-thumbnail">
    <div class="caption">
      <p>Painting</p>
    </div>
    <div class="imageandtext image_grid">
      <img src="http://lorempixel.com/300/300/?r" class="img-thumbnail">
      <div class="caption1">
        <p>Photography</p>
      </div>
    </div>
  </figure>
</div>

Answer 1

稍微修改了你的 HTML 和 CSS

.image_and_text {
  position: relative;
}

.image_and_text .caption {
  position: absolute;
  top: auto;
  bottom: 0px;
  left: 30px;
  color: white;
  text-shadow: 2px 0px 6px rgba(0, 0, 0, 0.5);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 image_and_text">
      <img src="http://lorempixel.com/300/300/" class="img-responsive img-thumbnail">
      <div class="caption">
        <p>Painting</p>
      </div>
    </div>
    <div class="col-xs-6 image_and_text">
      <img src="http://lorempixel.com/300/300/?r" class="img-responsive img-thumbnail">
      <div class="caption">
        <p>Photography</p>
      </div>
    </div>
  </div>
</div>