btn-group 的引导间距问题

Question

I'm having spacing issues with the following markup.

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

The spacing between the second and third row is what I'd expect. But why is there no spacing between the first and second row?

Answer 1

Add the form-group class to your div container. It's what's different and provides the margin.

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

codeply example

Answer 2

There is no spacing provided by the .row class - In your example the .form-group in 2nd and 3rd row has a bottom margin while the first row does not have an element with this class. If using Bootstrap 4 you could add mb-3 class or similar to the first row to achieve the desired result.