本章概述
Bootstrap 提供了一套完整的间距（Spacing）和尺寸（Sizing）工具类，让开发者能够快速调整元素的内外边距、宽度、高度等属性。本章将详细介绍这些工具类的使用方法和最佳实践。
间距工具类系统
1. 间距工具类基础
Bootstrap 的间距工具类遵循以下命名规则：
{property}{sides}-{size}
{property}{sides}-{breakpoint}-{size}
属性（Property）：
- m - margin（外边距）
- p - padding（内边距）
方向（Sides）：
- t - top（上）
- b - bottom（下）
- s - start（左，在 LTR 中）
- e - end（右，在 LTR 中）
- x - 水平方向（左右）
- y - 垂直方向（上下）
- 空白 - 所有四个方向
尺寸（Size）：
- 0 - 0
- 1 - 0.25rem
- 2 - 0.5rem
- 3 - 1rem
- 4 - 1.5rem
- 5 - 3rem
- auto - auto
2. 基础间距示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>间距工具类示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-box {
background-color: #e9ecef;
border: 1px solid #dee2e6;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.inner-box {
background-color: #007bff;
color: white;
padding: 0.5rem;
border-radius: 0.25rem;
}
.spacing-demo {
background-color: #f8f9fa;
border: 2px dashed #6c757d;
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-5">Bootstrap 间距工具类演示</h1>
<!-- Margin 示例 -->
<section class="mb-5">
<h2 class="text-primary mb-4">外边距（Margin）示例</h2>
<div class="row g-3">
<div class="col-md-6">
<h5>所有方向的外边距</h5>
<div class="spacing-demo">
<div class="demo-box m-0">
<div class="inner-box">m-0 (无外边距)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box m-1">
<div class="inner-box">m-1 (0.25rem)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box m-2">
<div class="inner-box">m-2 (0.5rem)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box m-3">
<div class="inner-box">m-3 (1rem)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box m-4">
<div class="inner-box">m-4 (1.5rem)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box m-5">
<div class="inner-box">m-5 (3rem)</div>
</div>
</div>
</div>
<div class="col-md-6">
<h5>特定方向的外边距</h5>
<div class="spacing-demo">
<div class="demo-box mt-3">
<div class="inner-box">mt-3 (上边距)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box mb-3">
<div class="inner-box">mb-3 (下边距)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box ms-3">
<div class="inner-box">ms-3 (左边距)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box me-3">
<div class="inner-box">me-3 (右边距)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box mx-3">
<div class="inner-box">mx-3 (水平边距)</div>
</div>
</div>
<div class="spacing-demo">
<div class="demo-box my-3">
<div class="inner-box">my-3 (垂直边距)</div>
</div>
</div>
</div>
</div>
</section>
<!-- Padding 示例 -->
<section class="mb-5">
<h2 class="text-primary mb-4">内边距（Padding）示例</h2>
<div class="row g-3">
<div class="col-md-6">
<h5>所有方向的内边距</h5>
<div class="demo-box p-0 mb-2">
<div class="inner-box">p-0 (无内边距)</div>
</div>
<div class="demo-box p-1 mb-2">
<div class="inner-box">p-1 (0.25rem)</div>
</div>
<div class="demo-box p-2 mb-2">
<div class="inner-box">p-2 (0.5rem)</div>
</div>
<div class="demo-box p-3 mb-2">
<div class="inner-box">p-3 (1rem)</div>
</div>
<div class="demo-box p-4 mb-2">
<div class="inner-box">p-4 (1.5rem)</div>
</div>
<div class="demo-box p-5 mb-2">
<div class="inner-box">p-5 (3rem)</div>
</div>
</div>
<div class="col-md-6">
<h5>特定方向的内边距</h5>
<div class="demo-box pt-3 mb-2">
<div class="inner-box">pt-3 (上内边距)</div>
</div>
<div class="demo-box pb-3 mb-2">
<div class="inner-box">pb-3 (下内边距)</div>
</div>
<div class="demo-box ps-3 mb-2">
<div class="inner-box">ps-3 (左内边距)</div>
</div>
<div class="demo-box pe-3 mb-2">
<div class="inner-box">pe-3 (右内边距)</div>
</div>
<div class="demo-box px-3 mb-2">
<div class="inner-box">px-3 (水平内边距)</div>
</div>
<div class="demo-box py-3 mb-2">
<div class="inner-box">py-3 (垂直内边距)</div>
</div>
</div>
</div>
</section>
<!-- 负边距示例 -->
<section class="mb-5">
<h2 class="text-primary mb-4">负边距示例</h2>
<p class="text-muted">负边距可以用来创建重叠效果或调整元素位置</p>
<div class="row">
<div class="col-md-6">
<div class="bg-light p-3 border rounded">
<div class="bg-primary text-white p-2 rounded mb-2">第一个元素</div>
<div class="bg-success text-white p-2 rounded mt-n2">第二个元素 (mt-n2)</div>
</div>
</div>
<div class="col-md-6">
<div class="bg-light p-3 border rounded">
<div class="bg-warning text-dark p-2 rounded me-2 d-inline-block">左元素</div>
<div class="bg-info text-white p-2 rounded ms-n2 d-inline-block">右元素 (ms-n2)</div>
</div>
</div>
</div>
</section>
<!-- 自动边距示例 -->
<section class="mb-5">
<h2 class="text-primary mb-4">自动边距示例</h2>
<p class="text-muted">使用 auto 边距可以实现元素的居中对齐</p>
<div class="bg-light p-3 border rounded mb-3">
<div class="bg-primary text-white p-2 rounded mx-auto" style="width: 200px;">
mx-auto (水平居中)
</div>
</div>
<div class="bg-light p-3 border rounded mb-3">
<div class="bg-success text-white p-2 rounded ms-auto" style="width: 200px;">
ms-auto (右对齐)
</div>
</div>
<div class="bg-light p-3 border rounded">
<div class="bg-warning text-dark p-2 rounded me-auto" style="width: 200px;">
me-auto (左对齐)
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
3. 响应式间距
<!-- 响应式间距示例 -->
<div class="container my-5">
<h2 class="text-primary mb-4">响应式间距</h2>
<p class="text-muted">间距可以根据不同的屏幕尺寸进行调整</p>
<div class="row g-3">
<div class="col-12">
<div class="bg-light p-3 border rounded">
<div class="bg-primary text-white p-2 rounded m-1 m-md-3 m-lg-5">
响应式外边距：小屏幕 m-1，中等屏幕 m-md-3，大屏幕 m-lg-5
</div>
</div>
</div>
<div class="col-12">
<div class="bg-light border rounded">
<div class="bg-success text-white rounded p-1 p-sm-2 p-md-3 p-lg-4 p-xl-5">
响应式内边距：xs(p-1) → sm(p-2) → md(p-3) → lg(p-4) → xl(p-5)
</div>
</div>
</div>
<div class="col-12">
<div class="bg-light p-3 border rounded">
<div class="bg-warning text-dark p-2 rounded mx-auto" style="width: 300px;">
<div class="text-center mt-2 mt-md-4 mb-1 mb-md-3">
响应式垂直边距
</div>
</div>
</div>
</div>
</div>
</div>
尺寸工具类系统
1. 宽度工具类
<!-- 宽度工具类示例 -->
<div class="container my-5">
<h2 class="text-primary mb-4">宽度工具类</h2>
<div class="mb-4">
<h5>百分比宽度</h5>
<div class="bg-light p-2 mb-2">
<div class="bg-primary text-white p-2 w-25">w-25 (25%)</div>
</div>
<div class="bg-light p-2 mb-2">
<div class="bg-primary text-white p-2 w-50">w-50 (50%)</div>
</div>
<div class="bg-light p-2 mb-2">
<div class="bg-primary text-white p-2 w-75">w-75 (75%)</div>
</div>
<div class="bg-light p-2 mb-2">
<div class="bg-primary text-white p-2 w-100">w-100 (100%)</div>
</div>
<div class="bg-light p-2 mb-2">
<div class="bg-primary text-white p-2 w-auto">w-auto (auto)</div>
</div>
</div>
<div class="mb-4">
<h5>最大宽度</h5>
<div class="bg-light p-2 mb-2">
<div class="bg-success text-white p-2 mw-100" style="width: 120%;">
mw-100 (max-width: 100%) - 即使设置宽度为120%，也不会超过父容器
</div>
</div>
</div>
<div class="mb-4">
<h5>视口宽度</h5>
<div class="bg-warning text-dark p-2 vw-100 mb-2">
vw-100 (width: 100vw) - 视口宽度的100%
</div>
<div class="bg-info text-white p-2 min-vw-100 mb-2">
min-vw-100 (min-width: 100vw) - 最小宽度为视口宽度的100%
</div>
</div>
</div>
2. 高度工具类
<!-- 高度工具类示例 -->
<div class="container my-5">
<h2 class="text-primary mb-4">高度工具类</h2>
<div class="row g-3">
<div class="col-md-6">
<h5>百分比高度</h5>
<div class="bg-light border" style="height: 200px;">
<div class="bg-primary text-white p-2 h-25 d-flex align-items-center justify-content-center">
h-25 (25%)
</div>
<div class="bg-success text-white p-2 h-50 d-flex align-items-center justify-content-center">
h-50 (50%)
</div>
<div class="bg-warning text-dark p-2 h-75 d-flex align-items-center justify-content-center">
h-75 (75%)
</div>
<div class="bg-danger text-white p-2 h-100 d-flex align-items-center justify-content-center">
h-100 (100%)
</div>
</div>
</div>
<div class="col-md-6">
<h5>自动高度和最大高度</h5>
<div class="bg-light border p-2 mb-2">
<div class="bg-info text-white p-2 h-auto">
h-auto (height: auto) - 根据内容自动调整高度
</div>
</div>
<div class="bg-light border p-2 mb-2" style="height: 100px;">
<div class="bg-secondary text-white p-2 mh-100" style="height: 150px;">
mh-100 (max-height: 100%) - 最大高度不超过父容器
</div>
</div>
</div>
</div>
<div class="mt-4">
<h5>视口高度</h5>
<div class="row g-2">
<div class="col-6">
<div class="bg-primary text-white p-2 vh-25 d-flex align-items-center justify-content-center">
vh-25 (25vh)
</div>
</div>
<div class="col-6">
<div class="bg-success text-white p-2 vh-50 d-flex align-items-center justify-content-center">
vh-50 (50vh)
</div>
</div>
</div>
<div class="mt-2">
<div class="bg-warning text-dark p-2 min-vh-100 d-flex align-items-center justify-content-center">
min-vh-100 (min-height: 100vh) - 最小高度为视口高度的100%
</div>
</div>
</div>
</div>
3. 响应式尺寸
<!-- 响应式尺寸示例 -->
<div class="container my-5">
<h2 class="text-primary mb-4">响应式尺寸</h2>
<p class="text-muted">尺寸工具类也支持响应式断点</p>
<div class="mb-4">
<h5>响应式宽度</h5>
<div class="bg-light p-2 mb-2">
<div class="bg-primary text-white p-2 w-100 w-md-75 w-lg-50 w-xl-25">
响应式宽度：xs(100%) → md(75%) → lg(50%) → xl(25%)
</div>
</div>
</div>
<div class="mb-4">
<h5>响应式高度</h5>
<div class="bg-light border" style="height: 300px;">
<div class="bg-success text-white p-2 h-100 h-md-75 h-lg-50 d-flex align-items-center justify-content-center">
响应式高度：xs(100%) → md(75%) → lg(50%)
</div>
</div>
</div>
</div>
实际应用案例
1. 卡片布局间距
<!-- 卡片布局间距示例 -->
<div class="container my-5">
<h2 class="text-primary mb-4">卡片布局间距应用</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="示例图片">
<div class="card-body d-flex flex-column">
<h5 class="card-title">产品标题</h5>
<p class="card-text flex-grow-1">这是产品的详细描述信息，展示了如何使用间距工具类来优化卡片布局。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">¥99.00</span>
<button class="btn btn-primary btn-sm">购买</button>
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<small class="text-muted">2天前更新</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<div class="text-center mb-3">
<div class="bg-primary rounded-circle mx-auto mb-3" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
<i class="bi bi-star text-white" style="font-size: 2rem;"></i>
</div>
<h5 class="card-title">特色服务</h5>
</div>
<p class="card-text text-center flex-grow-1">专业的服务团队为您提供全方位的支持和帮助。</p>
<div class="mt-auto text-center">
<button class="btn btn-outline-primary">了解更多</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-header bg-success text-white">
<h6 class="mb-0">推荐方案</h6>
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">高级套餐</h5>
<div class="mb-3">
<span class="h3 text-success">¥299</span>
<span class="text-muted">/月</span>
</div>
<ul class="list-unstyled flex-grow-1">
<li class="mb-2"><i class="bi bi-check text-success me-2"></i>功能特性 A</li>
<li class="mb-2"><i class="bi bi-check text-success me-2"></i>功能特性 B</li>
<li class="mb-2"><i class="bi bi-check text-success me-2"></i>功能特性 C</li>
<li class="mb-2"><i class="bi bi-check text-success me-2"></i>24/7 技术支持</li>
</ul>
<div class="mt-auto">
<button class="btn btn-success w-100">选择套餐</button>
</div>
</div>
</div>
</div>
</div>
</div>
2. 表单布局间距
<!-- 表单布局间距示例 -->
<div class="container my-5">
<h2 class="text-primary mb-4">表单布局间距应用</h2>
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">用户注册</h5>
</div>
<div class="card-body">
<form>
<!-- 基本信息 -->
<div class="mb-4">
<h6 class="text-muted mb-3">基本信息</h6>
<div class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">姓</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">名</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>
</div>
<!-- 联系信息 -->
<div class="mb-4">
<h6 class="text-muted mb-3">联系信息</h6>
<div class="mb-3">
<label for="email" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">手机号码</label>
<input type="tel" class="form-control" id="phone" required>
</div>
</div>
<!-- 账户信息 -->
<div class="mb-4">
<h6 class="text-muted mb-3">账户信息</h6>
<div class="mb-3">
<label for="username" class="form-label">用户名</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="row g-3">
<div class="col-md-6">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="col-md-6">
<label for="confirmPassword" class="form-label">确认密码</label>
<input type="password" class="form-control" id="confirmPassword" required>
</div>
</div>
</div>
<!-- 协议和按钮 -->
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agreement" required>
<label class="form-check-label" for="agreement">
我同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a>
</label>
</div>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary btn-lg">注册账户</button>
<button type="button" class="btn btn-outline-secondary">取消</button>
</div>
<div class="text-center mt-3">
<span class="text-muted">已有账户？</span>
<a href="#" class="text-primary">立即登录</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
3. 响应式布局间距
<!-- 响应式布局间距示例 -->
<div class="container-fluid">
<!-- 头部区域 -->
<header class="bg-primary text-white py-3 py-md-4 py-lg-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h1 class="h3 h-md-2 h-lg-1 mb-0">响应式网站</h1>
</div>
<div class="col-md-6 text-md-end mt-2 mt-md-0">
<nav>
<a href="#" class="text-white text-decoration-none me-3 me-lg-4">首页</a>
<a href="#" class="text-white text-decoration-none me-3 me-lg-4">产品</a>
<a href="#" class="text-white text-decoration-none me-3 me-lg-4">服务</a>
<a href="#" class="text-white text-decoration-none">联系</a>
</nav>
</div>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main class="py-4 py-md-5">
<div class="container">
<!-- 英雄区域 -->
<section class="text-center mb-5 mb-lg-6">
<div class="row justify-content-center">
<div class="col-lg-8">
<h2 class="display-6 display-md-5 display-lg-4 mb-3 mb-md-4">欢迎来到我们的网站</h2>
<p class="lead mb-4 mb-md-5">这是一个展示响应式间距应用的示例页面</p>
<div class="d-flex flex-column flex-sm-row gap-2 gap-md-3 justify-content-center">
<button class="btn btn-primary btn-lg px-4 px-md-5">开始使用</button>
<button class="btn btn-outline-primary btn-lg px-4 px-md-5">了解更多</button>
</div>
</div>
</div>
</section>
<!-- 特性展示 -->
<section class="mb-5 mb-lg-6">
<div class="row g-4 g-lg-5">
<div class="col-md-4">
<div class="text-center">
<div class="bg-primary rounded-circle mx-auto mb-3 mb-md-4" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
<i class="bi bi-lightning text-white"></i>
</div>
<h4 class="mb-2 mb-md-3">快速</h4>
<p class="text-muted">高性能的解决方案，让您的业务快速发展。</p>
</div>
</div>
<div class="col-md-4">
<div class="text-center">
<div class="bg-success rounded-circle mx-auto mb-3 mb-md-4" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
<i class="bi bi-shield-check text-white"></i>
</div>
<h4 class="mb-2 mb-md-3">安全</h4>
<p class="text-muted">企业级安全保障，保护您的数据和隐私。</p>
</div>
</div>
<div class="col-md-4">
<div class="text-center">
<div class="bg-warning rounded-circle mx-auto mb-3 mb-md-4" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
<i class="bi bi-people text-white"></i>
</div>
<h4 class="mb-2 mb-md-3">可靠</h4>
<p class="text-muted">7x24小时技术支持，确保服务稳定可靠。</p>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- 页脚区域 -->
<footer class="bg-dark text-white py-4 py-md-5">
<div class="container">
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<h5 class="mb-3">公司信息</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">关于我们</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">新闻动态</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">招聘信息</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5 class="mb-3">产品服务</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">产品介绍</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">技术支持</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">价格方案</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5 class="mb-3">帮助中心</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">使用指南</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">常见问题</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">联系客服</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5 class="mb-3">关注我们</h5>
<div class="d-flex gap-3">
<a href="#" class="text-white-50"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white-50"><i class="bi bi-twitter"></i></a>
<a href="#" class="text-white-50"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-white-50"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<hr class="my-4">
<div class="text-center text-white-50">
<p class="mb-0">© 2023 公司名称. 保留所有权利.</p>
</div>
</div>
</footer>
</div>
自定义间距和尺寸
1. 使用 CSS 变量自定义
/* 自定义间距变量 */
:root {
--bs-spacer: 1rem;
/* 自定义间距尺寸 */
--spacing-xs: 0.125rem; /* 2px */
--spacing-sm: 0.25rem; /* 4px */
--spacing-md: 0.5rem; /* 8px */
--spacing-lg: 1rem; /* 16px */
--spacing-xl: 1.5rem; /* 24px */
--spacing-xxl: 2rem; /* 32px */
--spacing-xxxl: 3rem; /* 48px */
}
/* 自定义间距工具类 */
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-xxl { margin: var(--spacing-xxl) !important; }
.m-xxxl { margin: var(--spacing-xxxl) !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-xxl { padding: var(--spacing-xxl) !important; }
.p-xxxl { padding: var(--spacing-xxxl) !important; }
/* 自定义尺寸工具类 */
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-55 { width: 55% !important; }
.w-60 { width: 60% !important; }
.w-65 { width: 65% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }
/* 固定尺寸 */
.w-50px { width: 50px !important; }
.w-100px { width: 100px !important; }
.w-150px { width: 150px !important; }
.w-200px { width: 200px !important; }
.w-250px { width: 250px !important; }
.w-300px { width: 300px !important; }
.h-50px { height: 50px !important; }
.h-100px { height: 100px !important; }
.h-150px { height: 150px !important; }
.h-200px { height: 200px !important; }
.h-250px { height: 250px !important; }
.h-300px { height: 300px !important; }
2. 使用 Sass 自定义
// 自定义间距配置
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 4, // 新增
7: $spacer * 5, // 新增
8: $spacer * 6, // 新增
xs: $spacer * 0.125, // 新增
sm: $spacer * 0.25, // 新增
md: $spacer * 0.5, // 新增
lg: $spacer, // 新增
xl: $spacer * 1.5, // 新增
xxl: $spacer * 2, // 新增
xxxl: $spacer * 3 // 新增
);
// 自定义尺寸配置
$sizes: (
10: 10%,
15: 15%,
20: 20%,
25: 25%,
30: 30%,
33: 33.333333%,
35: 35%,
40: 40%,
45: 45%,
50: 50%,
55: 55%,
60: 60%,
65: 65%,
66: 66.666667%,
70: 70%,
75: 75%,
80: 80%,
85: 85%,
90: 90%,
95: 95%,
100: 100%,
auto: auto
);
// 导入 Bootstrap
@import "~bootstrap/scss/bootstrap";
// 生成自定义工具类
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// 自定义间距工具类
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $length in $spacers {
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
.#{$abbrev}t#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size} { #{$prop}-top: $length !important; }
.#{$abbrev}e#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size} { #{$prop}-right: $length !important; }
.#{$abbrev}b#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
.#{$abbrev}s#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size} { #{$prop}-left: $length !important; }
}
}
// 自定义尺寸工具类
@each $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizes {
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
}
}
}
}
性能优化建议
1. 按需使用工具类
<!-- 好的做法：合理使用工具类 -->
<div class="card mb-4">
<div class="card-body p-4">
<h5 class="card-title mb-3">标题</h5>
<p class="card-text mb-0">内容</p>
</div>
</div>
<!-- 避免：过度使用工具类 -->
<div class="card mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
<div class="card-body p-1 p-sm-2 p-md-3 p-lg-4 p-xl-5">
<h5 class="card-title mb-1 mb-sm-2 mb-md-3">标题</h5>
<p class="card-text mb-0">内容</p>
</div>
</div>
2. 使用 CSS 变量优化
/* 使用 CSS 变量减少重复 */
.custom-component {
--component-spacing: 1rem;
--component-spacing-sm: 0.5rem;
--component-spacing-lg: 1.5rem;
padding: var(--component-spacing);
margin-bottom: var(--component-spacing);
}
.custom-component .header {
margin-bottom: var(--component-spacing-sm);
}
.custom-component .content {
padding: var(--component-spacing-lg);
}
/* 响应式调整 */
@media (max-width: 768px) {
.custom-component {
--component-spacing: 0.5rem;
--component-spacing-sm: 0.25rem;
--component-spacing-lg: 1rem;
}
}
本章总结
本章详细介绍了 Bootstrap 的间距和尺寸工具类系统：
主要内容
间距工具类系统
- 外边距（margin）和内边距（padding）的使用
- 方向性间距控制
- 负边距和自动边距
- 响应式间距
尺寸工具类系统
- 宽度和高度的百分比控制
- 最大/最小尺寸限制
- 视口相关尺寸
- 响应式尺寸
实际应用案例
- 卡片布局间距优化
- 表单布局间距设计
- 响应式布局间距应用
自定义扩展
- CSS 变量自定义
- Sass 配置自定义
- 性能优化建议
最佳实践
- 合理使用间距：保持视觉层次和一致性
- 响应式设计：在不同屏幕尺寸下调整间距
- 避免过度使用：不要为每个断点都设置不同的间距
- 语义化命名：使用有意义的间距值
- 性能考虑：合理使用工具类，避免 CSS 膨胀
练习题
基础练习
- 创建一个产品卡片，使用合适的间距工具类优化布局
- 设计一个联系表单，应用响应式间距
- 实现一个图片画廊，使用尺寸工具类控制图片大小
进阶练习
- 创建一个响应式的仪表板布局，合理使用间距和尺寸工具类
- 设计一个多列文章布局，在不同屏幕尺寸下调整间距
- 实现一个自定义的间距系统，扩展 Bootstrap 的默认配置
- 优化一个现有网站的间距设计，提升用户体验
通过本章的学习，您应该能够熟练使用 Bootstrap 的间距和尺寸工具类，创建具有良好视觉层次和响应式特性的网页布局。
