我有一个使用复选框的Bootstrap表单 - 在一种情况下，有大量选项可供选择。是否可以将它们对齐，以便它们出现在“列”或类似内容中 - 此时它们只出现在一个长列表中，这使得难以阅读。
以下是目前的情况：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main role="main" class="container">
<div>
<form method="get" action="projects.php" role="form">
<input type="hidden" name="action" value="projectsFind">
<div class="form-group row">
<label for="sectionNumber" class="col-sm-2 col-form-label">Section Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sectionNumber" name="sectionNumber" placeholder="Section Number">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">Selections</div>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hot Food">
<label class="form-check-label" for="gridCheck1">
Hot Food </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Retail">
<label class="form-check-label" for="gridCheck1">
Retail </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Affordable">
<label class="form-check-label" for="gridCheck1">
Affordable </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Canteen">
<label class="form-check-label" for="gridCheck1">
Canteen </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="At Home">
<label class="form-check-label" for="gridCheck1">
At Home </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Residential">
<label class="form-check-label" for="gridCheck1">
Residential </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hospitality">
<label class="form-check-label" for="gridCheck1">
Hospitality </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Supermarket">
<label class="form-check-label" for="gridCheck1">
Supermarket </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Education">
<label class="form-check-label" for="gridCheck1">
Education </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Student">
<label class="form-check-label" for="gridCheck1">
Student </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Leisure">
<label class="form-check-label" for="gridCheck1">
Leisure </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Exhibition">
<label class="form-check-label" for="gridCheck1">
Exhibition </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Health">
<label class="form-check-label" for="gridCheck1">
Health </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Seniors">
<label class="form-check-label" for="gridCheck1">
Seniors </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Restaurant">
<label class="form-check-label" for="gridCheck1">
Restaurant </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Standard">
<label class="form-check-label" for="gridCheck1">
Standard </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Industry">
<label class="form-check-label" for="gridCheck1">
Industry </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Social">
<label class="form-check-label" for="gridCheck1">
Social </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Recycle">
<label class="form-check-label" for="gridCheck1">
Recycle </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Re-use">
<label class="form-check-label" for="gridCheck1">
Re-use </label>
</div>
</div>
</div>
</form>
您可以看到“选择”仅列在正在运行的列表中。有没有办法让“选择”复选框以更易于阅读的格式对齐？
答案 0 :(得分：2)
您可以为.form-check-inline添加固定宽度。这会将它们与布局中的列对齐。
宽度值应略大于最长字的宽度。
.form-check-inline {
width: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main role="main" class="container">
<div>
<form method="get" action="projects.php" role="form">
<input type="hidden" name="action" value="projectsFind">
<div class="form-group row">
<label for="sectionNumber" class="col-sm-2 col-form-label">Section Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sectionNumber" name="sectionNumber" placeholder="Section Number">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">Selections</div>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hot Food">
<label class="form-check-label" for="gridCheck1">
Hot Food </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Retail">
<label class="form-check-label" for="gridCheck1">
Retail </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Affordable">
<label class="form-check-label" for="gridCheck1">
Affordable </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Canteen">
<label class="form-check-label" for="gridCheck1">
Canteen </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="At Home">
<label class="form-check-label" for="gridCheck1">
At Home </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Residential">
<label class="form-check-label" for="gridCheck1">
Residential </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hospitality">
<label class="form-check-label" for="gridCheck1">
Hospitality </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Supermarket">
<label class="form-check-label" for="gridCheck1">
Supermarket </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Education">
<label class="form-check-label" for="gridCheck1">
Education </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Student">
<label class="form-check-label" for="gridCheck1">
Student </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Leisure">
<label class="form-check-label" for="gridCheck1">
Leisure </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Exhibition">
<label class="form-check-label" for="gridCheck1">
Exhibition </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Health">
<label class="form-check-label" for="gridCheck1">
Health </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Seniors">
<label class="form-check-label" for="gridCheck1">
Seniors </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Restaurant">
<label class="form-check-label" for="gridCheck1">
Restaurant </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Standard">
<label class="form-check-label" for="gridCheck1">
Standard </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Industry">
<label class="form-check-label" for="gridCheck1">
Industry </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Social">
<label class="form-check-label" for="gridCheck1">
Social </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Recycle">
<label class="form-check-label" for="gridCheck1">
Recycle </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Re-use">
<label class="form-check-label" for="gridCheck1">
Re-use </label>
</div>
</div>
</div>
</form>