Bootstrap 水平表单
使用 Bootstrap 创建水平布局表单的方法
问题
使用 Bootstrap 创建水平表单的基本步骤？
解答
Bootstrap 5 水平表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 水平表单</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container cj661">
<form>
<!-- 使用 row 创建水平布局 -->
<div class="row g2dki">
<!-- 标签占 2 列 -->
<label for="email" class="col-sm-2 col-form-label">邮箱</label>
<!-- 输入框占 10 列 -->
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
</div>
<div class="row g2dki">
<label for="password" class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<!-- 复选框行 -->
<div class="row g2dki">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember">
<label class="form-check-label" for="remember">记住我</label>
</div>
</div>
</div>
<!-- 按钮行，使用 offset 对齐 -->
<div class="row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
</body>
</html>基本步骤
- 使用
.row包裹每行：创建栅格行 - 标签添加
.col-form-label：确保标签垂直居中对齐 - 使用
.col-sm-*分配宽度：标签和输入框各占一定列数 - 使用
.offset-sm-*偏移：让按钮等元素与输入框对齐
不同尺寸的标签
<!-- 小尺寸 -->
<label class="col-form-label col-form-label-sm">小标签</label>
<input class="form-control form-control-sm">
<!-- 大尺寸 -->
<label class="col-form-label col-form-label-lg">大标签</label>
<input class="form-control form-control-lg">Bootstrap 3 写法（旧版）
<!-- Bootstrap 3 使用 form-horizontal 类 -->
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control">
</div>
</div>
</form>关键点
- 使用
.row+.col-*栅格系统实现水平布局 - 标签必须添加
.col-form-label类以垂直居中 - 使用
.offset-sm-*让按钮与输入框对齐 - Bootstrap 5 移除了
.form-horizontal，改用栅格类 - 响应式断点：
col-sm-*在小屏幕以上生效，小屏幕自动堆叠
目录