时间戳

首页 > 解决方案 > 如何安排 Bootstrap 网格，其中一列垂直居中在 4x4 网格旁边？

html - 如何安排 Bootstrap 网格，其中一列垂直居中在 4x4 网格旁边？

问题描述

我还在学习如何使用 Bootstrap，我想知道如何更自由地排列网格。我试图让一个 div 在左侧垂直居中，在右侧有一个 4x4 网格。我提供了一个示例图像，说明我想如何以我想要的格式排列我的 div。请参阅 示例。

你将如何完成这样的事情？谢谢！

标签： htmlcssbootstrap-4

解决方案

在这种情况下，我会使用网格系统而不是引导程序。像这样的东西：

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;
        }

推荐阅读