Bootstrap: počet prvků na řádek

Bootstrap: počet prvků na řádek
« kdy: 10. 10. 2020, 18:10:10 »
Nasledujicim kodem generovanym v PHP vykresluji 2 radky, kazdy o 7 prvcich:
Kód: [Vybrat]
<div class="row">
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
</div>

<div class="row">
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
<div class="col-6 col-md-3 col-lg-3 col-xl col-sm-3  my-col"><img src='https://via.placeholder.com/150'></img><h6>Cgeneric_placeholder_text_with_expected_max_l</h6> <p>Text short desc</p></div>
</div>

Pri plnem rozlisenim jsou na monitoru zobrazeny 2 radky, kazdy o 7 prvcich.

1. 1 2 3 4 5 6 7
2. 1 2 3 4 5 6 7


Pri zmene velikosti obrazovky se zobrazovani rozlozi nasledovne:

1. 1 2 3 4 5 6
2. 7
3. 1 2 3 4 5 6
4. 7

Jelikoz jsou prvky vzdy ohraniceny tagem <row></row> dava tohle chovani naprosto smysl.
Bohuzel nevim jak zobrazovat 7 prvku na radek a v pripade zmenseni obrazovky pocet prvku postupne snizovat do stavu

1. 1 2 3 4 5 6
2. 7 1 2 3 4 5
3. 6 7

 

Citace
The Bootstrap grid has only 12 columns, so you should never have more than 12 columns in a row


« Poslední změna: 10. 10. 2020, 19:05:54 od Petr Krčmář »


BoneFlute

  • *****
  • 1 482
    • Zobrazit profil
Re:Bootstrap: počet prvků na řádek
« Odpověď #1 kdy: 11. 10. 2020, 00:42:58 »
Nepoužij row. Vytvoř si box, do kterého budeš umisťovat prvky, které budeš pozicovat pomocí flex pravidel. Baj vočko, dle ukázky, by si mohl zkusit použít jako základ pro prvek karty (cards) - ale to není podstatné. Zajímá tě to nepoužití bootstrap row, a použít css vlastnosti flex.

Re:Bootstrap: počet prvků na řádek
« Odpověď #2 kdy: 11. 10. 2020, 18:32:53 »
vykašlete se na bootstrap. Je to hnus, je se podívejte co máte za CSS třídy u jednotlivých elementů - nic více než bastl ;-( Nehledě na to, že máte určitě stažený celý BS a reálně využíváte tak 1%. Bohužel dost často narazíte i na ometení BS, kde potřebujete udělat něco jinak, resp. to navrhnout tak, že to nelze napasovat na jejich pošahaný grid...

mnohem jednodušší, alespoň za mě, je použít normální CSS a jeho flex.