gpt4 book ai didi

html - 如何在图像上添加按钮和文本并使它们具有响应性?

转载 作者:行者123 更新时间:2023-12-04 09:28:56 25 4
gpt4 key购买 nike

我是网页设计的新手,我正在尝试在图像上放置一个按钮和一个文本。我可以这样做,但问题是它没有响应。有人可以帮我解决吗?
我的代码:

.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>

我是在一些在线教程的帮助下完成的,我想在我的代码中使用 Bootstrap。
编辑:
我忘了提到我的按钮有问题,当我调整浏览器大小时,它总是停留在同一个地方。其他元素对我来说似乎没问题,但请指出我作为新手是否在代码中犯了任何其他错误。

最佳答案

更改 left:505px;.bookbuttonright: 0;它将留在容器的右侧。
完整代码:

.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>

关于html - 如何在图像上添加按钮和文本并使它们具有响应性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62916729/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com