带有 Bootstrap 的 4 个内联输入的 2 个内联标签答案

【问题标题】：2 inline labels for 4 inline inputs with Bootstrap带有 Bootstrap 的 4 个内联输入的 2 个内联标签
【发布时间】：2020-01-25 23:49:45
【问题描述】：

我想要一行有 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>

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

【问题讨论】：

标签： html forms bootstrap-4 inline

【解决方案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>

【讨论】：