Dwa div’y obok siebie w Bootstrapie

•

Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.

W tym przykładzie kolumny będą miały równe szerokości na ekranach średnich (rozdzielczość 768px i wyższa) i większych, dzięki klasie .col-md-6.

W Bootstrapie system siatki (grid system) jest oparty na 12 kolumnach, co pozwala na podział kontenera na różne szerokości, które można dostosować do różnych rozmiarów ekranów. Klasy takie jak .col-sm-6, .col-lg-6, itp., są używane do definiowania szerokości kolumn na różnych rozmiarach ekranów. „.col-xx” określa szerokość kolumny, która działa na wszystkie rozmiary ekranów (od najmniejszych do największych).

  • .col-sm-xx: Działa na ekranach o rozdzielczości co najmniej 576px (np. smartfony w orientacji poziomej).
  • .col-md-xx: Działa na ekranach o rozdzielczości co najmniej 768px (np. tablety).
  • .col-lg-xx: Działa na ekranach o rozdzielczości co najmniej 992px (np. laptopy).
  • .col-xl-xx: Działa na ekranach o rozdzielczości co najmniej 1200px (np. większe laptopy i monitory).

Modyfikując poniższy skrypt, można dowolnie zmieniać rozmiar divów. Na przykład lewy może być węższy (np. col-md-2, czyli zajmujący dwie kolumny ), a prawy szerszy, ale w tym przypadku zajmujący pozostałe 10 kolumn, a więc col-md-10. Analogicznie – lewy może być szerszy, np. col-md-8, a prawy zajmujący pozostałe (z dwunastu – 4 kolumny), a więc col-md-4.

Copy Code 


<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład dwóch kolumn Bootstrap</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <p>To jest pierwsza kolumna.</p>
            </div>
            <div class="col-md-6">
                <p>To jest druga kolumna.</p>
            </div>
        </div>
    </div>
</body>
</html>