Bootstrap grid - rozłożenie elementów

pytanie zadane 14 października 2019 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)
zamknięte 14 października 2019 przez kingkushlee

Witam,

W jaki sposób mógłbym uzyskać w bootstrapie, takie ustawienie kolumn jak tutaj: https://ibb.co/w70pcqq ?

Z góry dziękuję za pomoc.

komentarz zamknięcia: Rozwiązano

komentarz 14 października 2019 przez BT101 Stary wyjadacz (12,540 p.)

Zapomni o bootstrapie użyj grida albo flexa

https://codepen.io/BT101/pen/vYYGmpp?editors=1100

https://codepen.io/BT101/pen/rNNeyBK?editors=1100

.container {
  width: 1000px;
  height: 500px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  
  & > * {
    border: 5px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .col-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .col-2, .col-3 {
    grid-column: 3 / 5;
  }
}

1 odpowiedź

odpowiedź 14 października 2019 przez DawidK Nałogowiec (37,910 p.)
wybrane 14 października 2019 przez kingkushlee

Najlepsza

Rozbij to sobie na elementy moim zdaniem trochę łatwiej przeanalizować masz 2 wiersze:

1) wiersz 1 który ma 2 kolumny

1.1) pierwsza kolumna ma połowę szerokości

1.2) druga kolumna ma połowę szerokości i dwa wiersze

1.2.1) pierwszy wiersz drugiej kolumny ma 1 kolumnę na 100% jej szerokości

1.2.2) drugi wiersz drugiej kolumny ma 1 kolumnę na 100% jej szerokości

2) wiersz 2 ma 4 kolumny

Z tego powinna powstać taka siatka (dodałem bordery i cyfry, żeby było lepiej widać)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>grid bootstrap</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div class='container text-center'>
        <div class='row'>
            <div class='col-6 border'>
                1
            </div>
            <div class='col-6'>
                <div class='row'>
                    <div class='col-12 border'>
                        2
                    </div>
                    <div class='col-12 border'>
                        3
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-3 border'>
                4
            </div>
            <div class='col-3 border'>
                5
            </div>
            <div class='col-3 border'>
                6
            </div>
            <div class='col-3 border'>
                7
            </div>
        </div>
    </div>
</body>
</html>