У меня есть форма 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>
Вы можете видеть, что «Выборы» просто перечислены в рабочем списке. Можно ли выровнять флажки «Выбор» в более удобном для чтения формате?