Bootstrap: počet prvků na řádek

[vesterna12]

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

 

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

[Reklama]

[BoneFlute]

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.

[hurvajs spejbl]

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.