如何安排 Bootstrap 網格，其中一列垂直居中在 4x4 網格旁邊？

Question

我還在學習如何使用 Bootstrap，我想知道如何更自由地排列網格。 我試圖讓一個 div 在左側垂直居中，在右側有一個 4x4 網格。 我提供了一個示例圖像，說明我想如何以我想要的格式排列我的 div。 請參閱示例。

你將如何完成這樣的事情？ 謝謝！

Answer 1

在這種情況下，我會使用網格系統而不是引導程序。 像這樣的東西：

HTML：

<div class="grid-container">
        <div class="child a">Image</div>
        <div class="child b">Text 1</div>
        <div class="child c">Text 2</div>
        <div class="child d">Text 3</div>
        <div class="child e">Text 4</div>
    </div>

CSS：

.grid-container {
            display: grid;
            height: 50vh;
            padding: 10px;
            background-color: coral;
            border: 1px solid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-row-gap: 20px;
            grid-column-gap: 20px;
        }
        .child {
            background-color: cornflowerblue;
            border: 1px solid;
        }
        .a {
            grid-area: 1/1/3/3;
        }

Answer 2

使用引導程序，我建議您使用 flex 屬性

例子

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <div class="d-flex align-items-center justify-content-around p-3 bg-dark" style="height: 350px; width: 350px"> <div class="bg-light" style="height: 100px; width: 100px">IMAGE</div> <div class="row bg-light p-1" style="height: 150px; width: 150px"> <div class="col-6 bg-secondary text-light">1</div> <div class="col-6 bg-secondary text-light">2</div> <div class="col-6 bg-secondary text-light">3</div> <div class="col-6 bg-secondary text-light">4</div> </div> </div>

• d-flex：顯示彈性
• align-items-center：這會將您的所有項目垂直居中
• align-content-around: 是項目如何水平間隔，周圍占用可用空間，如您所見，平均分配它