css - Bootstrap 网格中的右边距错误

Question

我正在使用 Bootstrap 设计网页。我定位了一个绝对 <div> (透明文本覆盖)在我编码为在 Bootstrap 列框架内响应的图像上。我的文字叠加在绝对<div>与左边距的图像对齐但超出右边距(即不适合右侧设置的 Bootstrap 列)。关于如何使透明文本叠加层的右边界在列框架内对齐以响应图像的任何建议？

参见 https://cgriffith5.github.io/research.html

HTML:

<div class="container-fluid">
    <div class="row">  
        <div class="col-md-5 container">    
        <img src="assets/img.jpg" class="img-rounded" style="width:100%"> 
        <div class="overlay">Text</div>   
        </div>

CSS:

.container {
    position: relative; 
    max-width: 410px; /* Maximum width */
    margin: 0 auto; /* Center it */
}

.overlay {
    position: absolute; /* Position the background text */
    overflow: hidden;
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 15px; /* Some padding */
}`

Answer 1

像这样制作你的 HTML 代码:

<div class="row">  
    <div class="col-md-5 container">
      <div style="position: relative"> <!-- Make a div and give it a position of relative -->
         <img src="assets/img.jpg" class="img-rounded" style="width:100%"> 
         <p class="overlay">Text</p>
      </div>
    </div>
</div>

我们将包含 img 和叠加层的整个 div 包装为相对位置，并在其中使叠加层具有绝对位置。