我想在图像中放置文本和按钮，但我无法让它们保持响应。
.dados {
bottom: 10px;
right: 0;
}
.text {
font-family: "Arial Bold", Arial;
font-weight: 700;
font-size: 22px;
color: #ffffff !important;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Teste</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<div class="position-relative">
<img src="https://via.placeholder.com/300" alt="">
<div class="position-absolute dados">
<h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
<button class="btn btn-primary float-right">veja detalhes</button>
</div>
</div>
</div>
<div class="col-4">
<div class="position-relative">
<img src="https://via.placeholder.com/300" alt="">
<div class="position-absolute dados">
<h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
<button class="btn btn-primary float-right">veja detalhes</button>
</div>
</div>
</div>
<div class="col-4">
<div class="position-relative">
<img src="https://via.placeholder.com/300" alt="">
<div class="position-absolute dados">
<h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
<button class="btn btn-primary float-right">veja detalhes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我试过将父div设置为相对位置，并尝试用绝对位置打信息，但是没有用。
我希望此信息位于右下角的图像内。有谁知道如何做到这一点，以便他们保持响应？
最佳答案
您可以使用 Bootstrap Cards 和图像叠加。
如需更多引用，请参阅 https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
和 https://getbootstrap.com/docs/4.0/components/card/
在整页中尝试该代码段以查看响应情况
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text . Some example text some example text. </p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card ">
<img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text . Some example text some example text. </p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card img-fluid">
<img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text. Some example text some example text. </p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>更新:您可以使用 flex 来实现相同的目的
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.card {
display: flex;
flex-direction: column;
}
card-img-overlay {
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
<div class="card-img-overlay card-body d-flex flex-column" style="">
<div class="mt-auto">
<h4 class="card-title ">John Doe</h4>
<p class="card-text">Some example text. Some example text some example text. </p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
<div class="card-img-overlay card-body d-flex flex-column" style="">
<div class="mt-auto">
<h4 class="card-title ">John Doe</h4>
<p class="card-text">Some example text. Some example text some example text. </p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
<div class="card-img-overlay card-body d-flex flex-column" style="">
<div class="mt-auto">
<h4 class="card-title ">John Doe</h4>
<p class="card-text">Some example text. Some example text some example text. </p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>在全屏模式下看到那个按钮，一切都移到了底部。
如果你想要任何东西在顶部，把它移到 <div class="mt-auto"> 之外.
关于css - 将固定文本放入图像中 - 使用 Bootstrap 进行响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58055621/