使用CSS/Bootstrap实现标签与输入框的同行布局求助

直接调整Bootstrap的表单网格布局，给每组标签+输入控件单独分配列即可实现你要的效果：

{#Select a Role#}
<div class="form-row">
    <div class="form-group col-12">
        <div class="form-row">
            <!-- Is Employee 组 -->
            <div class="form-group col-md-6">
                <label for="is_employee">Is Employee</label>
                <select id="is_employee" name="is_employee" class="form-control">
                    <option value="1">Yes</option>
                    <option value="0">No</option>
                </select>
            </div>
            <!-- DMS Employee Code 组 -->
            <div class="form-group col-md-6">
                <label for="dms_id">DMS Employee Code</label>
                <input id="dms_id" name="dms_id" type="text" class="form-control">
            </div>
        </div>
    </div>
</div>

关键修改说明： #

• 把原来挤在同一个col里的两组控件拆分，每组用一个col-md-6的form-group容器包裹，这样在屏幕宽度≥768px时，两组各占一行的一半，横向并排；小屏幕下会自动垂直堆叠，适配移动端。
• 每个标签和对应的输入框放在同一容器内，确保标签和输入框的对应关系，同时让标签自然显示在输入框上方。
• 移除了冗余的col-md-12层级，简化结构的同时保证表单区域占满父容器宽度。

内容的提问来源于stack exchange，提问作者Lew Ashby 85