Bootstrap - 4 входа с 2 встроенными метками - PullRequest
Новая
       7

Bootstrap - 4 входа с 2 встроенными метками

0 голосов
/ 25 сентября 2019

Я хочу строку с 4 входами, с 2 группами по 2 входа, и каждая группа имеет одну метку.

Example image

Мой токкод: 

<form>
<div class="row">
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
        <input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
    </div>
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="mondayend">&nbsp;</label>
        <input type="time" class="form-control" id="mondayend" name="mondayend" required>
    </div>
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
        <input type="time" class="form-control" id="monday2start" name="monday2start">
    </div>
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="monday2end">&nbsp;</label>
        <input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
    </div>
</div>

Как получить строку формы, подобную этой?Это вроде работает, но входы с пустой меткой выше, чем входы с меткой.

1 Ответ

1 голос
/ 25 сентября 2019

Попробуйте заключить «группу форм» в отдельный div: 

<form>
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
                <input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="mondayend">&nbsp;</label>
                <input type="time" class="form-control" id="mondayend" name="mondayend" required>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
                <input type="time" class="form-control" id="monday2start" name="monday2start">
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="monday2end">&nbsp;</label>
                <input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
            </div>
        </div>
    </div>
</form>
...