| Autor | Zpráva | ||
|---|---|---|---|
| gully Profil |
#1 · Zasláno: 14. 5. 2020, 17:19:14
Ahoj všem,
nedaří se mi horizontálně vycentrovat bootstrapovské karty na stránce umime-to-s-delphi.wz.cz/#dalsi-offline-verze. Je tu někdo, kdo by mi poradil? |
||
| Tomáš123 Profil |
#2 · Zasláno: 14. 5. 2020, 17:51:22
gully:
Skús lepšie špecifikovať problém. Aké karty? Kde na stránke? Aká je ich pozícia u teba? Kam by si ich chcel umiestniť? Čo si skúšal a nefunguje? |
||
| gully Profil |
Kartami mám, jak jsem psal, na mysli bootstrapovské karty (odkaz vede primo na ně), ale tak přidávám tedy konkrétní obrázek:
Na vycentrování jsem použil <div> s bootstrapovskou třídou (řádek č. 6):
<div class="section bg-light" id="dalsi-offline-verze">
<div class="container">
<div class="row text-justify">
<div class="col-lg-8 mx-auto">
<h2>Další off-line verze</h2>
<div class="d-flex justify-content-center">
<div class="row">
<div class="col text-center">
<div class="card mt-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Tipy a triky v Delphi</h5>
<p class="card-text">Programová off-line verze seriálu nabitého tipy a vychytávkami v jazyce Object Pascal.</p>
<br>
<a target="_blank" href="http://tipy-a-triky-v-delphi.wz.cz/" class="btn btn-primary">Navštívit stránku</a>
</div>
</div>
</div>
<div class="col text-center">
<div class="card mt-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Poznáváme C# a Microsoft .NET</h5>
<p class="card-text">Programová off-line verze seriálu o programování v jazyce C# na platformě .NET.</p>
<a target="_blank" href="http://poznavame-c-msnet.wz.cz/" class="btn btn-primary">Navštívit stránku</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Při rozlišení >= 768 jsou vycentrované (obr. níže) 
Ale při nižším rozlišení už vycentrované nejsou: 
Snad jsem teď problém popsal dostatečně. |
||
| Trejpa Profil |
#4 · Zasláno: 14. 5. 2020, 19:43:24
gully:
Asi jsi centrování pro nižší šířku okna nikam nezadal. Třeba takto: <style>@media (max-width: 768px) { .card { margin: auto; }}</style> |
||
| gully Profil |
#5 · Zasláno: 14. 5. 2020, 19:57:15
Funguje, díky moc!
|
||
|
Časová prodleva: 4 roky
|
|||
0