如何使引导按钮组在列中对齐。我正在布置一个问题和多项选择答案,我希望问题和答案在同一条线上。我试图让问题和所有答案字段在列中排列在一起,并且按钮都应延伸到与该行上该问题的其他答案相同的高度。
我使用了各种格式的行、列和组,但都没有成功。按比例缩小时,列看起来更好,但在全视图中,按钮对齐处于关闭状态,并且无法正确填充列
<!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>
