如何解决Bootstrap 4表单检查-更改Opton的顺序，从左到右，从上到下，从上到下，从左到右
我有一个简单的Bootstrap表单，其中显示带有13个选项的复选框-这些选项包括以下内容：
Urban Plans
Commercial Entity
Cultural Approval
Education Sector
Hospitality
Industrial Design
Interiors Art
Leisure/ Sporting
Residential Care
Retail Space
Seniors Living Care
Student Housing
Warehouse
当前看起来像这样：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
</div><!-- /.col-md-6-->
<div class="col-md-6">
<table class="table table-striped table-bordered">
<thead>
<th scope="col">Customer Sectors</th>
</thead>
<tr>
<td>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Urban Plans">Urban Plans </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Commercial Entity">Commercial Entity </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Cultural Approval">Cultural Approval </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Education Sector">Education Sector </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Hospitality">Hospitality </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Industrial Design">Industrial Design </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Interiors Art">Interiors Art </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Leisure/ Sporting" checked="checked">Leisure/ Sporting </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Residential Care">Residential Care </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Retail Space">Retail Space </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Seniors Living Care">Seniors Living Care </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Student Housing" checked="checked">Student Housing </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Warehouse">Warehouse </label>
</td>
</tr>
</table>
</div><!-- /.col-md-6-->
</div><!-- /.row-->该复选框的值是从数据库中检索出来的，因此它们是动态生成的。如您所见，每行的选项从左到右，然后从上到下显示。
以下是屏幕截图，以防代码段无法正确显示：
我们想要更改它，以便列表从上到下然后从左到右显示，因此它会像这样显示在网页上：
城市计划休闲/体育
商业实体寄宿护理
文化批准零售空间
教育部门的老年人生活护理
热情好客的学生宿舍
工业设计仓库
室内装饰
解决方法
您可以使用CSS columns来执行此操作。您可以为复选框的容器创建一个类，然后指定：
- 要显示多少列
- 列的最小大小
因此，例如，下面的类将在最小200px宽度的2列中显示复选框（一旦屏幕变得太小而无法并列显示列，则这些列将堆叠在一起）
.mycolumns{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
当然，您可以将其更改为所需的列数和宽度。
工作段：
.mycolumns{
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
}
/* put each checkbox on a separate line */
.mycolumns label { display:block}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6">
<p>This is your first col-md-6</p>
</div><!-- /.col-md-6-->
<div class="col-md-6">
<h2>Customer Sectors</h2>
<div class="mycolumns">
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Urban Plans">Urban Plans </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Commercial Entity">Commercial Entity </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Cultural Approval">Cultural Approval </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Education Sector">Education Sector </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Hospitality">Hospitality </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Industrial Design">Industrial Design </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Interiors Art">Interiors Art </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Leisure/ Sporting" checked="checked">Leisure/ Sporting </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Residential Care">Residential Care </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Retail Space">Retail Space </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Seniors Living Care">Seniors Living Care </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Student Housing" checked="checked">Student Housing </label>
<label class="checkbox-inline-contacts">
<input type="checkbox" id="clientSectors" name="clientSectors[]" value="Warehouse">Warehouse </label>
</div>
</div>
<!-- /.col-md-6-->
</div>
<!-- /.row-->
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。