Question

我正在使用Bootstrap进行网页设计。我在一个我编码为在Bootstrap列框架内响应的图像上放置了一个绝对的<div>（透明文本覆盖）。我的文本覆盖在绝对<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和overlay的整个div包装为相对位置和内部位置，使叠加位置为绝对位置。

Answer 2

查看您在https://cgriffith5.github.io/research.html发布的页面，一种解决方案是将.overlay div的宽度从100％更改为

select t1.teams_name as home_team_name,
            t2.teams_name as away_team_name
from games g
join teams t1 on g.home_team_fk = t1.teams_id
join teams t2 on g.away_team_fk = t2.teams_id
where g.games_season = ???

列上的默认Bootstrap填充是左右15px，因此将.overlay减少15px + 15px会对此进行补偿并使其与图像的宽度相同。

这是一个现场演示：https://codepen.io/panchroma/pen/pLQRja

希望这有帮助！

Bootstrap网格中的右边距错误

2 个答案: