时间戳

首页 > 解决方案 > 带有 Bootstrap 的 4 个内联输入的 2 个内联标签

html - 带有 Bootstrap 的 4 个内联输入的 2 个内联标签

问题描述

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

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

标签： htmlformsbootstrap-4inline

解决方案

尝试将“表单组”包含在单独的 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>

推荐阅读