Bootstrap-在整个图像大小中动态调整文本div的大小

Question

我正在学习Bootstrap，并且有一个包含一行和一列的容器，其中包含以下类：

col-lg-4 col-md-6 col-sm-12

在该列内，我有一个包含图像的div和另一个名为img-text包含文本的div。 我已经格式化了img-text以便显示在图像上，但是希望div在我调整页面大小时可以动态地在图像上延伸。 请查看图片以获取更多详细信息。

到目前为止，这就是我所拥有的。

 .img_text { height: 60px; width: 90.5%; background-color: #4aaaa5; position: absolute; top: 65%; color: white; font-family: 'Georgia', Times, Times New Roman, serif; font-size: 1.5em; padding-top: 20px; text-align: center; z-index: 1; } 

 <div class='col-lg-4 col-md-6 col-sm-12' id='col1'> <img src='img/ph1.jpg' class='img-responsive' /> <div class='img_text'>Apples</div> </div> 

Answer 1

调整.img_text{width: 100%;}

ps可能会在较大的屏幕尺寸下导致错误。 在这种情况下，您需要使用媒体规则

 .img_text { height: 60px; width: 100%; background-color: #4aaaa5; position: absolute; top: 65%; color: white; font-family: 'Georgia', Times, Times New Roman, serif; font-size: 1.5em; padding-top: 20px; text-align: center; z-index: 1; } 

 <div class='col-lg-4 col-md-6 col-sm-12' id='col1'> <img src='img/ph1.jpg' class='img-responsive' /> <div class='img_text'>Apples</div> </div> 

Answer 2

尝试

.img_text {
  height: 60px;
  width: calc(100% - 15px);
  background-color: #4aaaa5;
  position: absolute;
  top: 65%;
  float:left;
  color: white;
  font-family: 'Georgia', Times, Times New Roman, serif;
  font-size: 1.5em;
  padding-top: 20px;
  text-align: center;
  z-index: 1;
}

和

#col1{
overflow:hidden;
}