代码之家 › 专栏 › 技术社区 › S. Imp

如何使复选框+标签系列在填充可用宽度时垂直堆叠?

bootstrap-4 flexbox css html

S. Imp · 技术社区 · 7 年前

我有一个使用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>

有没有什么简单的方法可以让我的布局通过在额外的列中显示来利用大屏幕的额外宽度?

0 回复 | 直到 7 年前

Katy H. 7 年前

.form-check.form-check-inline {
    width: 33%;
    display: block;
    float: left;
}

<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>

这也可以奏效。

Gaurav Bhardwaj 7 年前

body {
    padding: 20px;
}

.w-10 {
    width: 100%;
}

.myGroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px !important;
}

<loadcss/>
<div class="container">
    <div class="row">
        <div class="col-xs-12 w-10">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">State:</h3>
                    <div class="card-text myGroup">
                        <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 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 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 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>