У меня есть проект, который использует 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>
Есть ли какой-нибудь простой способ, позволяющий моему макету использовать преимущества большой ширины больших экранов при отображении в дополнительных столбцах?