bootstrap-4 - 引导按钮组在网格布局中的定位
问题描述
我怎样才能让我的引导按钮组在列中排列。我正在列出一个问题和多项选择答案,我希望问题和答案在同一行。我试图让问题和列中的所有答案字段排列在一起,并且按钮应该都伸展到与该行上该问题的其他答案相同的高度。
我玩过各种格式的行、列和组,但没有成功。当按比例缩小时,列看起来更好,但是在全视图中,按钮对齐关闭并且它们没有正确填充列
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<form action="home.html" method="post">
<div class="card">
<div class="card-header bg-primary text-light text-center">Development</div>
<div class="card-body">
<div class="btn-group " role="group" aria-label="Basic radio toggle button group">
<div class="text-primary col">
This is a question 1
</div>
<div class="col">
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" checked>
<label class="btn btn-outline-primary" for="dq1a1">No version control or used
infrequent</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="devq1" value="a2" id="dq1a2">
<label class="btn btn-outline-primary" for="dq1a2">Version control on all source code</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="devq1" value="a3" id="dq1a3">
<label class="btn btn-outline-primary" for="dq1a3">Version control on all source code and
library and artificats</label>
</div>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="text-primary col">
This is question 2
</div>
<div class="col">
<input type="radio" class="btn-check" name="devq2" value="b1" id="dq2a1" checked>
<label class="btn btn-outline-primary" for="dq2a1">Manual deployment process</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="devq2" value="b2" id="dq2a2">
<label class="btn btn-outline-primary" for="dq2a2">Partially automated deployment
process</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="devq2" value="b3" id="dq2a3"
autocomplete="off">
<label class="btn btn-outline-primary" for="dq2a3">Fully automated deployment process</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-primary text-light text-center">Process</div>
<div class="card-body">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="text-primary col">
This is question 3
</div>
<div class="col">
<input type="radio" class="btn-check" name="processq1" value="a1" id="pq1a1" checked>
<label class="btn btn-outline-primary" for="pq1a1">Big work batch size and releases on a
monthly
basis or longer</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="processq1" value="a2" id="pq1a2">
<label class="btn btn-outline-primary" for="pq1a2">Work batch size optimized for weekly
releases, but deployment frequency not in sync with business requirements (e.g lead
time)</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="processq1" value="a3" id="pq1a3">
<label class="btn btn-outline-primary" for="pq1a3">Work batch size optimized for frequent
releases and deployment frequency in sync with business requirements (e.g. lead
time)</label>
</div>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="text-primary col">
This is question 4
</div>
<div class="col">
<input type="radio" class="btn-check" name="processq2" value="b1" id="pq2a1" checked>
<label class="btn btn-outline-primary" for="pq2a1">Change approval needed from multiple
parties
outside the team</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="processq2" value="b2" id="pq2a2">
<label class="btn btn-outline-primary" for="pq2a2">Change approval needed within the
team</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="processq2" value="b3" id="pq2a3">
<label class="btn btn-outline-primary" for="pq2a3">No change approval needed or change
approval
process totally automated which is really long to see what happens with the
buttons </label>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<input class="col-2 btn btn-primary" type="submit">
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
</body>
</html>
解决方案
老实说,我不太清楚你在问什么,但是我这样做的方式是使用引导程序table-borderless
,这是我的意思的一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body><div class="card">
<div class="card-header bg-primary text-light text-center">Development</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td>
<div class="text-primary">
This is a question 1
</div>
</td>
<td>
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" checked>
<label class="btn btn-outline-primary" for="dq1a1">No version control or used infrequent</label>
</td>
<td>
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" >
<label class="btn btn-outline-primary" for="dq1a1">Version control on all source code</label>
</td>
<td>
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" >
<label class="btn btn-outline-primary" for="dq1a1">Version control on all source code and library and artificats</label>
</td>
</tr>
<tr>
<td>
<div class="text-primary">
This is a question 2
</div>
</td>
<td>
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" checked>
<label class="btn btn-outline-primary" for="dq1a1">Manual deployment process</label>
</td>
<td>
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" >
<label class="btn btn-outline-primary" for="dq1a1">Partially automated deployment process</label>
</td>
<td>
<input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" >
<label class="btn btn-outline-primary" for="dq1a1">Fully automated deployment process</label>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
</body>
</html>
推荐阅读
- jquery - 如何用 div 文本替换表单文本字符串
- javascript - 为什么将 Array.of() 应用于 Object 会在 JavaScript/ECMAScript 中创建 Number
- c# - 在 .net 中一次访问两个表
- python - 过滤嵌套列表
- angular - 带有答案 0 url null ionic 3 的 http 请求
- azure - 通过 Azure DevOps (VSTS) 将 ASP.NET Core 项目部署到 Azure WebApp 缺少站点/wwwroot 中的文件
- api - 用于电影和电视节目的 Google API 提供程序
- python - 将查找表映射到熊猫列的最快方法
- javascript - 切换带有状态的 CSS 类
- python - ImportError:DLL 加载失败:找不到指定的模块。TensorFlow 聊天机器人