Bootstrap 4表单输入-对齐复选框
[英]Bootstrap 4 Form Input - Align checkboxes
问题描述
I have a Bootstrap Form that uses checkboxes - in one case there are a large number of options to choose from. 
我有一个使用复选框的Bootstrap表单-在一种情况下，有很多选项可供选择。 Is it possible to align these so they appear in 'columns' or similar - at the moment they just appear in one long list which makes it hard to read. 是否有可能将它们对齐以使它们出现在“列”或类似内容中-目前它们仅出现在一个长长的列表中，这使得它们很难阅读。
Here's how it currently looks: 当前的外观如下：
<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>
You can see the "Selections" are just listed in a running list. 您可以看到“选择”仅列在运行列表中。 Is there a way to make the "Selections" checkboxes aligned in a more easy to read format? 有没有一种方法可以使“选择”复选框以更易于阅读的格式对齐？
1 个解决方案
解决方案1
2 已采纳 2018-05-15 04:35:37
You can add fixed width to the .form-check-inline .This will align them in a column like layout. 您可以在.form-check-inline添加固定宽度，这将使它们在布局等列中对齐。
The value of the width should be little more than the width of the longest word. width的值应略大于最长字的宽度。
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
对齐Bootstrap表单中的嵌入式文本输入 - Align inline text input in Bootstrap Form
带输入字段的引导复选框 - Bootstrap Checkboxes with Input Field
输入文字+选择+引导程序+表单内联：水平对齐标签 - Input text + Select + Bootstrap + form-inline: horizontal align label
如何对齐Bootstrap表单的输入字段和标签？ - How to align a Bootstrap form's input fields and labels?
如何将bootstrap形式的输入与input-group-addons对齐？ - How to align inputs in bootstrap form with input-group-addons?
如何在Bootstrap 3中垂直对齐输入和选择表单字段 - How to align input and select form fields vertically middle in Bootstrap 3
如何使用Bootstrap将表单输入与页面底部对齐？ - How can I align form input to the bottom of the page with Bootstrap?
Bootstrap - 在顶部垂直对齐表单组 label，在底部输入 - Bootstrap - vertical align form group label on top, input at bottom
对齐表单控件的Bootstrap - Align form controls Bootstrap
在Bootstrap 4 Alpha 6中对齐表格吗？ - Align form in Bootstrap 4 Alpha 6?
相关标签