bootstrap5如何使用Gutters

95次阅读
没有评论

在 Bootstrap 5 中,Gutters 是指在 row 中列之间的空间。在默认情况下,列之间没有空间,但是可以使用 Bootstrap 提供的 g 类来添加间距。下面是一个使用 Bootstrap 5 的 Gutters 的完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Gutters Example</title>
    <!-- 引入 Bootstrap 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>Bootstrap Gutters Example</h1>
    <p>Resize the browser window to see the effect.</p>
    <div class="container text-center">
        <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
            <div class="col">
                <div class="p-3 bg-success text-white">Row column</div>
            </div>
        </div>
    </div>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中,我们将页面布局划分为一个带有 5个列的网格,并使用 g-3 类将列之间的间距设置为 3 个像素。在实际使用中,您可以根据需要调整间距大小,例如使用 g-2 设置间距为 2 个像素,或者使用 g-4 设置间距为 4 个像素。

注意,在这个示例中,我们使用了 Bootstrap 的 row 和 col-* 类来创建网格布局,然后使用 g-* 类来设置列之间的间距。与使用 Grid system 相比,使用 Gutters 可以更轻松地控制列之间的间距。

现在保存文件并在浏览器中打开,可以看到在调整浏览器窗口大小时,列之间的间距会自动调整,以适应不同的屏幕尺寸。

正文完
 
评论(没有评论)