Codepen https://codepen.io/David263/pen/zynaorq pokazuje przykład prostej strony głównej Układ, który idealnie pasuje do przeglądarki i ośrodki niektóre treści DIV (wybierz Zmień View & GT; pełny widok strony w Codepen, aby wyraźnie zobaczyć stronę). Nie zwróć uwagę na elementy stylu CSS używane do ustawiania wysokości div i wielu klas 5 zaciętych 5, używanych do osiągnięcia pionowego centrującego. Uzyskanie tej pracy zajęło kilka dni, ale nie używa tylko prostych klas 5.

<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
        <div class="row col-12 text-center text-light">
            <h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
            <h3 class="font-weight-bold">A great starter layout for a landing page</h3>
        </div>
</header>

Moja próba użycia zwykłego kontenera, rzędów i klas COL (patrz https://codepen.io/David263 / Full / XXGZLPJ) nie udało się osiągnąć pełnej wysokości wykazanej przez pierwszego przykładu.

<header id=jumbo class="container-fluid bg-dark">
    <div class="h-50 row align-items-center col-12 text-center text-light">
        <div class="col py-auto">
            <h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
            <h3 class="font-weight-bold">A great starter layout for a landing page</h3>
        </div>
    </div>
</header>

A te trudności zostały napotkane przed dodaniem obrazu tła, który nie wydaje się możliwy w Bootstrap 5.

Nie zrozum mnie źle; Nie jestem przeciwny używania CSS w razie potrzeby. To tylko trudno powiedzieć dokładnie, jakie ograniczenia są dla bootstrap 5, dzięki czemu niestandardowe CSS staje się konieczne.

Wiele stron internetowych ma stronę główną zawierającą duże zdjęcie lub wideo w tle, z tekstem koncentrowanym poziomo i pionowo na pierwszym planie, więc ten przykład reprezentuje coś, co jest bardzo często używane. Z pewnością taki częste układ musi być możliwy w Bootstrap 5.

0
David Spector 15 kwiecień 2021, 21:41

1 odpowiedź

Najlepsza odpowiedź

Bootstrap nie jest srebrną kulą - jego ramy (pomyśl o tym jako podwozie, któremu potrzebujesz na szczycie). Bootstrap oferuje kilka klas "pomocników", aby nie musiał dodać całej grupy powtarzających się CSS .. Ale to wszystko, co może zrobić. Jasne zrozumienie CSS bardzo pomaga w użyciu bootstrap.

Na przykład klasa h-50 jest tylko height: 50%; w CSS. To 50% tego rodzica. Ale twój {x2}} nie ma wysokości .. więc 50% tego, co .. 0. jest nieznane ?? (może się różnić w zależności od przeglądarki do przeglądarki)

Nie jest jasne, co próbujesz osiągnąć - ale jeśli udasz się do HTTPS: // GetBootstrap .com / Docs / 5.0 / Przykłady / zobaczysz całą grupę przykładów i punktów wyjściowych, aby dostać się do tego, gdzie musisz być. Myślę, że Okładka jest dobrym miejscem do lądowania. (ponownie kliknij prawym przyciskiem myszy i "Wyświetl źródło strony" ...)

1
Vino 15 kwiecień 2021, 22:14