Breadcrumb alatti card-s elhelyezési probléma

Breadcrumb alatti card-s elhelyezési probléma
2021-06-26T20:03:41+02:00
2021-06-30T09:05:28+02:00
2022-10-15T21:25:30+02:00
kerdezo3
Hiába teszek a breadcrumb nav-ja után clear both-os sortörést az alatta lévő card-ok úgy helyezkednek el "arányosan", hogy még a fölötte lévő breadcrumb-ot is mintha beleszámítaná (kihagy az utolsó card után egy jó adag helyet):

<!DOCTYPE html> <html lang=hu> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <title>Document</title> </head> <body> <nav class="float-end me-3" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="index.html">Kezdőlap</a></li> <li class="breadcrumb-item"><a href="objektum.html">Objektum</a></li> <li class="breadcrumb-item active" aria-current="page">Almenü</li> </ol> </nav><br style="clear: both"> <section id="kartyak" class="row g-3"> <div class='col'> <div class='card shadow-lg text-light bg-primary bg-gradient mx-1'> <div class='card-header'> <span class='text-uppercase'>Fejléc1</span><br> </div> <div class='card-body'> <h5 class='card-title text-warning'>Cím1</h5> <p class='card-text'> <span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum tempore nostrum dicta, id natus eos illum quaerat quisquam eum at vel porro, ipsam quis reiciendis quae impedit suscipit numquam tempora. Ex eos odit vero? Dolor, eum! Tempora in perferendis doloremque natus aut nulla nobis nostrum velit voluptas fugiat quas, sequi, error dicta facilis maxime autem eos dolores obcaecati ullam reprehenderit hic quisquam odit. Autem, consequatur aspernatur! Voluptate voluptatem fuga consectetur rem libero maxime natus alias assumenda dolor, numquam cumque recusandae dicta reiciendis quidem ipsam perferendis sed suscipit, mollitia earum corporis minus! Dolores voluptatum nesciunt nisi eligendi dignissimos obcaecati dolore minus. </span> </p> <hr> <img src='kepek/kep1.jpg' class='card-img-bottom'><br> <span class='badge rounded-pill bg-info text-center'>n1</span> </div> <div class='card-footer'> <span class='fst-italic float-start'>x Ft</span> <span class='text-decoration-underline float-end'>kategória</span> </div> </div> </div> <div class='col'> <div class='card shadow-lg text-light bg-primary bg-gradient mx-1'> <div class='card-header'> <span class='text-uppercase'>Fejléc2</span><br> </div> <div class='card-body'> <h5 class='card-title text-warning'>Cím2</h5> <p class='card-text'> <span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum tempore nostrum dicta, id natus eos illum quaerat quisquam eum at vel porro, ipsam quis reiciendis quae impedit suscipit numquam tempora. Ex eos odit vero? Dolor, eum! Tempora in perferendis doloremque natus aut nulla nobis nostrum velit voluptas fugiat quas, sequi, error dicta facilis maxime autem eos dolores obcaecati ullam reprehenderit hic quisquam odit. Autem, consequatur aspernatur! Voluptate voluptatem fuga consectetur rem libero maxime natus alias assumenda dolor, numquam cumque recusandae dicta reiciendis quidem ipsam perferendis sed suscipit, mollitia earum corporis minus! Dolores voluptatum nesciunt nisi eligendi dignissimos obcaecati dolore minus. </span> </p> <hr> <img src='kepek/kep1.jpg' class='card-img-bottom'><br> <span class='badge rounded-pill bg-info text-center'>n2</span> </div> <div class='card-footer'> <span class='fst-italic float-start'>x Ft</span> <span class='text-decoration-underline float-end'>kategória</span> </div> </div> </div> <div class='col'> <div class='card shadow-lg text-light bg-primary bg-gradient mx-1'> <div class='card-header'> <span class='text-uppercase'>Fejléc3</span><br> </div> <div class='card-body'> <h5 class='card-title text-warning'>Cím3</h5> <p class='card-text'> <span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum tempore nostrum dicta, id natus eos illum quaerat quisquam eum at vel porro, ipsam quis reiciendis quae impedit suscipit numquam tempora. Ex eos odit vero? Dolor, eum! Tempora in perferendis doloremque natus aut nulla nobis nostrum velit voluptas fugiat quas, sequi, error dicta facilis maxime autem eos dolores obcaecati ullam reprehenderit hic quisquam odit. Autem, consequatur aspernatur! Voluptate voluptatem fuga consectetur rem libero maxime natus alias assumenda dolor, numquam cumque recusandae dicta reiciendis quidem ipsam perferendis sed suscipit, mollitia earum corporis minus! Dolores voluptatum nesciunt nisi eligendi dignissimos obcaecati dolore minus. </span> </p> <hr> <img src='kepek/kep3.jpg' class='card-img-bottom'><br> <span class='badge rounded-pill bg-info text-center'>n3</span> </div> <div class='card-footer'> <span class='fst-italic float-start'>x Ft</span> <span class='text-decoration-underline float-end'>kategória</span> </div> </div> </div> <div class='col'> <div class='card shadow-lg text-light bg-primary bg-gradient mx-1'> <div class='card-header'> <span class='text-uppercase'>Fejléc4</span><br> </div> <div class='card-body'> <h5 class='card-title text-warning'>Cím4</h5> <p class='card-text'> <span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum tempore nostrum dicta, id natus eos illum quaerat quisquam eum at vel porro, ipsam quis reiciendis quae impedit suscipit numquam tempora. Ex eos odit vero? Dolor, eum! Tempora in perferendis doloremque natus aut nulla nobis nostrum velit voluptas fugiat quas, sequi, error dicta facilis maxime autem eos dolores obcaecati ullam reprehenderit hic quisquam odit. Autem, consequatur aspernatur! Voluptate voluptatem fuga consectetur rem libero maxime natus alias assumenda dolor, numquam cumque recusandae dicta reiciendis quidem ipsam perferendis sed suscipit, mollitia earum corporis minus! Dolores voluptatum nesciunt nisi eligendi dignissimos obcaecati dolore minus. </span> </p> <hr> <img src='kepek/kep4.jpg' class='card-img-bottom'><br> <span class='badge rounded-pill bg-info text-center'>n4</span> </div> <div class='card-footer'> <span class='fst-italic float-start'>x Ft</span> <span class='text-decoration-underline float-end'>kategória</span> </div> </div> </div> <div class='col'> <div class='card shadow-lg text-light bg-primary bg-gradient mx-1'> <div class='card-header'> <span class='text-uppercase'>Fejléc5</span><br> </div> <div class='card-body'> <h5 class='card-title text-warning'>Cím5</h5> <p class='card-text'> <span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum tempore nostrum dicta, id natus eos illum quaerat quisquam eum at vel porro, ipsam quis reiciendis quae impedit suscipit numquam tempora. Ex eos odit vero? Dolor, eum! Tempora in perferendis doloremque natus aut nulla nobis nostrum velit voluptas fugiat quas, sequi, error dicta facilis maxime autem eos dolores obcaecati ullam reprehenderit hic quisquam odit. Autem, consequatur aspernatur! Voluptate voluptatem fuga consectetur rem libero maxime natus alias assumenda dolor, numquam cumque recusandae dicta reiciendis quidem ipsam perferendis sed suscipit, mollitia earum corporis minus! Dolores voluptatum nesciunt nisi eligendi dignissimos obcaecati dolore minus. </span> </p> <hr> <img src='kepek/kep5.jpg' class='card-img-bottom'><br> <span class='badge rounded-pill bg-info text-center'>n5</span> </div> <div class='card-footer'> <span class='fst-italic float-start'>x Ft</span> <span class='text-decoration-underline float-end'>kategória</span> </div> </div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>
Mutasd a teljes hozzászólást!
Hú, a gutter rontotta el: ha kiszedem a g-3 osztályt, akkor már jó. Valahogy nem "szeretik" egymást a float-tal, hiába a clearfix.
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd