我有一个使用Bootstrap 4的项目。在一个表单中,我为美国的每个州加上几个地区都有一个复选框。这些标签/复选框对以内联方式显示,填充以利用大屏幕上的可用宽度,这很好。然而,,每个状态都出现在同一行上,就好像它们是这样的词:
☐ Alabama ☐ Alaska ☐ Arizona ☐ Arkansas ☐ California
☐ Colorado ☐ Connecticut etc etc
相反,我希望后续的每个复选框都垂直显示在下一行,但要包装成列,以填充大屏幕上的可用空间。也就是说,在手机(小屏幕)上,每条线路可能只有一个状态,但在大屏幕上,你会得到多个列,如下所示:
☐ Alabama ☐ Maryland ☐ Rhode Island
☐ Alaska ☐ Massachusetts ☐ South Carolina
☐ Arizona ☐ Michigan ☐ South Dakota
☐ Arkansas ☐ Minnesota ☐ Tennessee
☐ California ☐ Mississippi ☐ Texas
☐ Colorado ☐ Missouri ☐ Utah
☐ Connecticut ☐ Montana ☐ Vermont
☐ Delaware ☐ Nebraska ☐ Virginia
☐ Florida ☐ Nevada ☐ Washington
☐ Georgia ☐ New Hampshire ☐ West Virginia
☐ Hawaii ☐ New Jersey ☐ Wisconsin
☐ Idaho ☐ New Mexico ☐ Wyoming
☐ Illinois ☐ New York ☐ American Somoa
☐ Indiana ☐ North Carolina☐ Federated Micronesia
☐ Iowa ☐ North Dakota ☐ Guam
☐ Kansas ☐ Ohio ☐ Marshall Islands
☐ Kentucky ☐ Oklahoma ☐ Puerto Rico
☐ Louisiana ☐ Oregon ☐ U.S. Virgin Islands
☐ Maine ☐ Pennsylvania ☐ Washington, D.C.
下面是我当前的HTML标记示例:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">State:</h3>
<div class="card-text">
<div class="form-check form-check-inline">
<label>
<input type="checkbox" name="state_nopref" value="state_nopref" onclick="uncheck_all_state(this)" checked>No Preference
</label>
</div><!-- end checkbox -->
<div class="form-check form-check-inline">
<label>
<input name="state[]" type="checkbox" value="AL" onclick="uncheck_state_nopref(this)" >Alabama
</label>
</div>
<div class="form-check form-check-inline">
<label>
<input name="state[]" type="checkbox" value="AK" onclick="uncheck_state_nopref(this)" >Alaska
</label>
</div>
<!-- ETC -->
<div class="form-check form-check-inline">
<label>
<input name="state[]" type="checkbox" value="VI" onclick="uncheck_state_nopref(this)" >U.S. Virgin Islands
</label>
</div>
<div class="form-check form-check-inline">
<label>
<input name="state[]" type="checkbox" value="DC" onclick="uncheck_state_nopref(this)" >Washington, D.C.
</label>
</div>
</div><!-- end card-text -->
</div>
</div><!-- end card -->
</div><!-- end column -->
</div><!-- end row -->
</div>
有没有什么简单的方法可以让我的布局通过在附加的列中显示来利用大屏幕的额外宽度?
https://stackoverflow.com/questions/54794313
复制相似问题