文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何让checkbox+label系列在填充可用宽度的同时垂直堆叠？

问如何让checkbox+label系列在填充可用宽度的同时垂直堆叠？
EN

Stack Overflow用户
提问于 2019-02-21 03:56:47
回答 2查看 42关注 0票数 3

我有一个使用Bootstrap 4的项目。在一个表单中，我为美国的每个州加上几个地区都有一个复选框。这些标签/复选框对以内联方式显示，填充以利用大屏幕上的可用宽度，这很好。然而，，每个状态都出现在同一行上，就好像它们是这样的词：

代码语言：javascript
复制
☐ Alabama  ☐ Alaska  ☐ Arizona  ☐ Arkansas  ☐ California
☐ Colorado  ☐ Connecticut etc etc

相反，我希望后续的每个复选框都垂直显示在下一行，但要包装成列，以填充大屏幕上的可用空间。也就是说，在手机(小屏幕)上，每条线路可能只有一个状态，但在大屏幕上，你会得到多个列，如下所示：

代码语言：javascript
复制
☐ 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标记示例：

代码语言：javascript
复制
<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>

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

html
css
flexbox
bootstrap-4
EN

回答 2

Stack Overflow用户

发布于 2019-02-21 04:26:06

​

代码语言：javascript
复制
.form-check.form-check-inline {
    width: 33%;
    display: block;
    float: left;
}
代码语言：javascript
复制
<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>

​

这也是可行的。

票数 1
EN

Stack Overflow用户

发布于 2019-02-21 04:08:01

​

代码语言：javascript
复制
body {
    padding: 20px;
}

.w-10 {
    width: 100%;
}

.myGroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px !important;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54794313

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档