3+9的引导数据库列不在同一行上
3+9的引导数据库列不在同一行上
提问于 2021-02-28 01:40:35
我正在定义一个广播表单，其中将有一个问题和3个答案，该表单是内联的，基本上问题应该是3个cols，答案div应该是9个cols。但是，当我使用3和9时，换行符，问题不会出现在与答案相同的行上
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-dark text-light">
<form>
<div class="form-group form-check-inline form-row border border-danger">
<div class="col-3 border border-danger">This is the first multiple choice question</div>
<div class="col-9 form-check-inline border rounded-pill border-danger">
<div class="form-check col">
<label class="form-check-label" for="q1a1">
<input class="form-check-input active" type="radio" id="q1a1" name="q1" value="a1"
checked="checked">
Answer one text with is line
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" id="q1a2" name="q1" value="a2">
<label class="form-check-label" for="q1a2">Answer two</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" id="q1a3" name="q1" value="a3">
<label class="form-check-label" for="q1a3">Answer three</label>
</div>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
</body>
</html>
当总列数只有12列时，为什么第二个div在新行上结束？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-28 02:22:44
您需要在form-group和col-9中移除form-check-inline类，并在.col-9中添加.row
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid bg-dark text-light">
<form>
<div class="form-group form-row border border-danger">
<div class="col-3 border border-danger">This is the first multiple choice question</div>
<div class="col-9 border rounded-pill border-danger">
<div class="row">
<div class="form-check col">
<label class="form-check-label" for="q1a1">
<input class="form-check-input active" type="radio" id="q1a1" name="q1" value="a1" checked="checked"> Answer one text with is line
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" id="q1a2" name="q1" value="a2">
<label class="form-check-label" for="q1a2">Answer two</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" id="q1a3" name="q1" value="a3">
<label class="form-check-label" for="q1a3">Answer three</label>
</div>
</div>
</div>
</div>
</form>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66401646
复制相关文章
相似问题
腾讯云开发者
