4 个内联输入的 2 个内联标签 Bootstrap

Question

我想要一行有 4 个输入，有 2 组 2 个输入，每组有一个标签。

我现在的代码：

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

如何获得这样的表单行？它有点管用，但带有空标签的输入高于带有标签的输入。

Answer 1

尝试将 "form-group" 包含在单独的 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>

4 个内联输入的 2 个内联标签 Bootstrap

2 inline labels for 4 inline inputs with Bootstrap

html

forms

inline

bootstrap-4