Bootstrap проблемы с интервалом в btn-group

Question

У меня проблемы с интервалом в следующей разметке.

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

Расстояние между второй и третьей строкой - это то, что я ожидал. Но почему между первым и вторым рядом нет интервала?

Answer 1

Класс .row не предоставляет интервалов. В вашем примере .form-group во 2-й и 3-й строке имеет нижнее поле, а в первой строке нет элемента с этим классом. Если вы используете Bootstrap 4, вы можете добавить класс mb-3 или аналогичный класс в первую строку для достижения желаемого результата.

Answer 2

Добавьте класс form-group в свой контейнер div. Это то, что отличается и обеспечивает маржу.

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

пример кода