J'essaie d'atteindre ce comportement:
img-fluide code>, car elles doivent échouir sur des points d'arrêt Bootstrap LI>
- La mise en page doit toujours être comme la maquette, les deux lorsque les images sont petites ou grandes (le bouton ne nécessite pas d'échelle) li>
ul>
Etant donné que les éléments ne peuvent pas couvrir sur div code> s, j'ai essayé de mettre le bouton dans la première colonne et de la définir sur Position: absolu code> + de nombreuses variantes des accessoires, mais aucun moyen, je pourrais obtenir le résultat dont j'ai besoin. p> Je n'ai pas besoin d'utiliser 2 Col code> S à tout prix, tant que ce sera Tout à l'intérieur d'un rangée code>, je peux faire n'importe quoi, c'est juste mon attermp strong> p>
Quelques tentatives: p>
point de départ sans bouton code>: p> xxx pré> tentative 1: p> xxx pré> tentative 2: p>
<div class="row py-3">
<div class="col">
<a class="btn btn-success text-white px-5" style="position: absolute; left: 0; right: 0;">Hi guys</a>
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
</div>
4 Réponses :
HTML:
.some-row {
position: relative;
}
.some-btn {
position: absolute;
bottom: 30px;
margin: 0 auto;
}
Le bouton doit être centré horizontalement et la plupart de la distance entre le bas ne peuvent pas être une valeur fixe dans PX, il doit être en% de la hauteur actuelle img
Cette solution apporte l'hypothèse que votre bouton est placé dans la première colonne selon votre propre tentative. Dans ce cas, tout ce dont vous avez besoin pour que le bouton soit placé au milieu des deux colonnes consiste à utiliser Exemple: strong> p> p> parentwidth - 0.5 * ButtonWidth code>. Une combinaison de laissée code> et transforme code> atteint que:
<link type = "text/css" rel = "stylesheet" href = "https://cutt.ly/Twe8un2"/>
<div class = "row">
<div class = "col">
<img src = "https://placehold.it/693x300" class = "img-fluid">
<a class = "btn btn-danger text-white">Custom Button</a>
</div>
<div class = "col">
<img src = "https://placehold.it/693x300" class = "img-fluid">
</div>
</div>
Peut-être que je n'étais pas clair, mais je voulais dire le contraire: la mise en page doit toujours être comme la maquette, peu importe la taille des images
C'est ce que mon exemple fait, Sergio.
Oui, après la modification. Quelqu'un m'a donné la réponse parfaite avant tous les autres. Je vous ai donné un coup de vote comme ça, alors ça devrait aller bien :)
Ma réponse n'a pas changé avec la modification. J'ai simplement créé un extrait de travail pour la montrer, car je l'avais posté à l'origine de mon téléphone. Upvot ou accepter la réponse est hors de propos. Je vais bien tant que cela aide quelqu'un.
Oui, au début, votre réponse n'était pas dans % , il était dans em . Et quand j'ai vérifié pour la première fois des réponses, le premier dans % était celui que j'ai choisi et que l'un a déjà eu un extrait de code runnable aussi, il était donc rapide de vérifier le résultat. C'est pourquoi.
quelque chose comme ça
p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<a class="btn btn-success text-white px-5">Hi guys</a>
</div> ici est un stylo que j'ai utilisé avec une disposition de grille pour reproduire votre maquette.
J'ai utilisé la grille parce qu'ils facilitent la superposition des éléments et d'organiser une mise en page 2D.
.img1 {
grid-row: 1/4;
grid-column: 1/3;
}
.img2 {
grid-row: 1/4;
grid-column: 3/5;
}
.button1 {
grid-row: 2/3;
grid-column: 2/4;
}
S'il vous plaît partager votre code
Qu'est-ce que tu as essayé jusque-là?
Mis à jour avec mon code