bootstrap - rzędy w równej odległości na całej stronie.

[qrdziel]

Na początku wpomnę tylko, że przydałby się dział dla początkujących dotyczących html, css, php itp.

Mam problem z Bootstrapem. Chciałbym utworzyć komórkę wysoką na cały ekran a w niej kilka rzędów (np 3) równo rozmieszczonych w pionie.
Piszę coś takiego:


<div class-"row vh-100 d-flex align-items-center">
<div class-"col-12">xxx</div>
<div class-"col-12">xxx</div>
<div class-"col-12">xxx</div>
</div>

i to jakoś nie działa

[terra]

BPierwszy podstawowy błąd masz w definiscji struktury, jeśli chcesz mieć trzy wiersze to musisz je wpisać, columna odnosi się tylko do kolumny, więc nie zrobisz z niej wiersza



<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div> <div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
<div class="row"> <div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>

</div>

w efekcie otrzymasz trzy wiersze, każdy podzielony na trzy równe kolumny.

tutaj masz wszystko czego potrzebujesz https://www.w3schools.com/

[qrdziel]

trzeba czytać ze zrozumieniem. trzy wiersze w równych odległościach na całej stronie - nie kolumny.
w jednym rzędzie - nazwa firmy, w drugim slogan reklamowy a w trzecim telefon i chcę to na całą stronę nie tylko na środku
kontener robię na cały ekran klasą vh-100
póżniej mogę zrobić trzy wiersze (row) z pojedyńczymi komórkami (col) lub jak podałem w pierwszym przykładzie.
rozkminiłem dla czterech rzędów:

<div class="container vh-100">
<div class="row h-100">
<div class="col-12 h-25 d-flex align-items-center justify-content-center">jeden</div>
<div class="col-12 h-25 d-flex align-items-center justify-content-center">dwa</div>
<div class="col-12 h-25 d-flex align-items-center justify-content-center">trzy</div>
<div class="col-12 h-25 d-flex align-items-center justify-content-center">cztery</div>
</div>
</div>
ale dla trzech samym bootstrapem bez dodatkowego css nie potrafie. gdyby było coś jak my-auto.

[terra]

Czytam, ze zrozumieniem , ale "... by jezyk giętki, powiedział wszystko co pomyśli głowa..."
...komórkę wysoką na cały ekran a w niej kilka rzędów (np 3) równo rozmieszczonych w pionie
Faktycznie zasugerowałem się niepotrzebnie Twoim col-12, ale przykład który podałem da siatkę równych komórek 3x3, natomiast kontener to co innego niż komórka
..Chciałbym utworzyć komórkę wysoką na cały ekran..

mój przykład jest odpowiedzią na treść, oznacza ni mniej ni więcej, że chcesz osiągniesz 3 wiersze na cały ekran, w równej odległości, podzielone na równe komórki , w kolumnach. Jeśli chcesz zablokować wysokość poszczególnych wierszy to stosujesz css max-height ewentualnie vh.
Gdybyś wskazał, że mowa o kontenerze, to otrzymałbyś zupełnie inną informację, bo jest na to dużo prostsza metoda, bez takich ewolucji, jakie wykonujesz:
definicja stylu


.container {
display: grid;
grid-template-rows: 33vh;
height: 100vh;
/* do wyrównania treści możesz stosować */

justify-content: space-evenly;
justify-items: center;
align-content: space-evenly;
align-items: center;

}

a potem już tylko korzystasz np.:


<div class="container">
<div>wiersz-a</div>
<div>wiersz-b</div>
<div>wiersz-c</div>
</div>


ilość kodu jakby mniejsza :)

Aha dla czterech wierszy


grid-template-rows: 25vh;

[PanAreczek]

ilość kodu jakby mniejsza kryptowaluty (https://kryptowiedza.pl/)
Genialne rozwiązanie! Przyda się chyba każdemu

[terra]

Przepraszam wszystkich, którzy chcieli skorzystać i coś nie wyszło, ale jest błąd w tym co podałem, prawidłowo powinno być:


.container { display: grid;
grid-template-rows: 33vh 33vh 33vh;
}

wówczas ten kod zadziała prawidłowo


<div class="container">
<div>wiersz 1</div>
<div>wiersz 2</div>
<div>wiersz 3</div>
</div>

gdybyśmy chcieli zrobić to samo ale w pionie, to


.container {
display: grid;
grid-template-rows: 100vh 100vh 100vh;
grid-template-columns: 33vw 33vw 33vw;
}

[ProgramistaBeLike]

dałem repa^^ Mega fajny kod