我是一个新的网页设计，我试图把一个按钮和一个图片上的文字。 我可以这样做，但问题是它没有反应。 有人能帮我修一下吗？
我的代码:
null
.imagewrap {display:inline-block;position:relative;}
.bookbutton {position:absolute;bottom:25px;left:505px;}
.bottom-left {
position: absolute;
bottom: 25px;
left: 20px;
font-weight: bold;
font-stretch:ultra-condensed;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main_heading my-5">
<div class="text-center">
<h1 class="display-1">Games available for paying</h1>
<h5 class="display-6">Book your slot now</h5>
<hr class="w-25 mx-auto" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
</figure>
<div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
<button type="button" class="btn btn-info bookbutton ">Book Now</button>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
</div>
</div>
</div>
</section>null
我已经在一些在线教程的帮助下完成了，我想在我的代码中使用Bootstrap。
编辑:我忘了提到我有按钮的问题，当我调整浏览器的大小时，它总是停留在同一个地方。 其他项目似乎对我来说是可以的，但是如果我作为一个新手在我的代码中犯了任何其他错误，请指出来。
将.BookButton上的left:505px；更改为right:0；，它将停留在容器的右侧。
完整代码:
null
.imagewrap {
display: inline-block;
position: relative;
}
.bookbutton {
position: absolute;
bottom: 25px;
right: 0;
}
.bottom-left {
position: absolute;
bottom: 25px;
left: 20px;
font-weight: bold;
font-stretch: ultra-condensed;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="main_heading my-5">
<div class="text-center">
<h1 class="display-1">Games available for paying</h1>
<h5 class="display-6">Book your slot now</h5>
<hr class="w-25 mx-auto" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
</figure>
<div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
<button type="button" class="btn btn-info bookbutton ">Book Now</button>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
</div>
</div>
</div>
</section>
这是你的答案，只要改变你的图像，不要忘记链接引导4。 否则会与内容重叠。
null
.bookbutton {
position: absolute;
bottom: 25px;
right: 20px;
}
.bottom-left {
position: absolute;
bottom: 25px;
left: 20px;
font-weight: bold;
font-stretch: ultra-condensed;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}<section class="main_heading my-5">
<div class="text-center">
<h1 class="display-1">Games available for paying</h1>
<h5 class="display-6">Book your slot now</h5>
<hr class="w-25 mx-auto" />
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 mb-4">
<div class="position-relative">
<img
src="https://placeimg.com/640/480/nature"
alt="FIFA 2020"
class="img-fluid naFIFA"
/>
<span class="bottom-left p-6 mb-0 bg-secondary text-light">
FIFA 2020
</span>
<button type="button" class="btn btn-info bookbutton">
Book Now
</button>
</div>
</div>
<div class="col-12 col-md-6 mb-4">
<div class="position-relative">
<img
src="https://placeimg.com/640/480/nature"
alt="FIFA 2020"
class="img-fluid naFIFA"
/>
<span class="bottom-left p-6 mb-0 bg-secondary text-light">
NFS-HEAT
</span>
<button type="button" class="btn btn-info bookbutton">
Book Now
</button>
</div>
</div>
<div class="col-12 col-md-6 mb-4">
<div class="position-relative">
<img
src="https://placeimg.com/640/480/nature"
alt="FIFA 2020"
class="img-fluid naFIFA"
/>
<span class="bottom-left p-6 mb-0 bg-secondary text-light">
Dualshock 4
</span>
<button type="button" class="btn btn-info bookbutton">
Book Now
</button>
</div>
</div>
</div>
</div>
</section>