如何正确地水平放置引导复选框答案

【问题标题】：How to properly space bootstrap checkboxes horizontally如何正确地水平放置引导复选框
【发布时间】：2020-03-14 10:59:47
【问题描述】：

我正在尝试使用以下方法水平对齐引导复选框：

<div class="blueBorder container-fluid col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <div class="row">
        <div class="container-fluid">
            <label class="text-left col-lg-12 col-md-12 col-sm-12 col-xs-12 col-form-label">Attributes:</label>

            <input type="checkbox" value="">
            <label class="checkbox-inline col-lg-2">Camp Site</label>
            <input type="checkbox" value="">
            <label class="checkbox-inline">Offsite Visit</label>
            <input type="checkbox" value="">
            <label class="checkbox-inline">Scout Den</label>
            <input type="checkbox" value="">
            <label class="checkbox-inline">Hike</label>

        </div>
    </div>
</div>

我的输入字段没有填充引导容器的宽度时遇到问题，并在 stackoverflow 上找到了添加 css 的解决方案：

    input, textarea {
        width: 100% !important
    }

但是，这会导致复选框格式出现问题。使用 css：

没有css：

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

如果使用引导程序，请使用此源

https://getbootstrap.com/docs/4.0/components/forms/#default-stacked

【讨论】：