Как настроить форму Bootstrap 4, чтобы иметь флажок перед полем ввода? - PullRequest
Новая
       4

Как настроить форму Bootstrap 4, чтобы иметь флажок перед полем ввода?

0 голосов
/ 02 февраля 2020

Я хочу добиться этого: enter image description here

Я хочу, чтобы в одной строке было 4 одинаковых по размеру столбца, содержащих метку в первой строке, и флажок перед фактическое поле ввода во второй строке.

Я попробовал следующее, но смог отобразить только один набор элементов управления в одной строке, и поля разбиты: 

<fieldset class="border p-2">
    <legend class="w-auto pl-1 pr-1">Trial Restrictions</legend>
    <div class="form-group">
        <div class="form-row">
            <label for="TrialRestrictionExpirationDaysValue">Expiration Days</label>
        </div>
        <div class="form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
            <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue" name="TrialRestrictionExpirationDaysValue" />
        </div>
    </div>
</fieldset>

Как настроить форму Bootstrap 4 для установки флажка перед полем ввода?

1 Ответ

0 голосов
/ 02 февраля 2020

Я предлагаю использовать это: 

<div class="container">
    <fieldset class="border p-4">
        <legend class="w-auto pl-1 pr-1">Trial Restrictions</legend>
    <div class="row">
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue1">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue1" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue2">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue2" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue3">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue3" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue4">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue4" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
    </div>
    </fieldset>
</div>
...