btn-group 的引导间距问题答案

【问题标题】：Bootstrap spacing issues with btn-groupbtn-group 的引导间距问题
【发布时间】：2020-06-17 22:51:05
【问题描述】：

以下标记存在间距问题。

<h2>Profitability Report</h2>

<form method="post">

    <div class="row">
        <div class="col-md-12">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-secondary active">
                    <input type="radio" name="reporttype" id="option1" value="0" autocomplete="off" checked> Monthly
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="reporttype" id="option2" value="1" autocomplete="off"> Quarterly
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="reporttype" id="option3" value="2" autocomplete="off"> Annual
                </label>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <select id="date-options" asp-for="ReportSettings.MonthCode" class="form-control"></select>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <select id="date-options" asp-for="ReportSettings.MonthCode" class="form-control"></select>
            </div>
        </div>
    </div>

</form>

第二行和第三行之间的间距是我所期望的。但是为什么第一排和第二排之间没有间距呢？

【问题讨论】：

因为它的.form-group 为您提供了边距底部。另外，为什么你用标签代替<buttons>？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

将form-group 类添加到您的 div 容器中。这就是与众不同的地方并提供了余量。

<div class="form-group btn-group btn-group-toggle" data-toggle="buttons">

codeply example

【讨论】：

【解决方案2】：

.row 类没有提供间距 - 在您的示例中，第二行和第三行中的 .form-group 具有底部边距，而第一行没有此类的元素。如果使用 Bootstrap 4，您可以在第一行添加 mb-3 类或类似的类以实现所需的结果。

【讨论】：