使用CSS/bootstrap布局标签和输入

mhd8tkvw  于 2022-12-01  发布在  Bootstrap
关注(0)|答案(1)|浏览(154)

我希望这两个级别在同一行,每个级别在各自的输入上。我希望这两个输入在同一行,在各自的标签下。我对CSS/bootstrap相当不好,我正在努力解决这个问题,目前我的两个输入太长了,在不同的行上。

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

如有任何帮助,我们将不胜感激,谢谢。

我希望这两个输入在相应标签下的同一行/线上。

euoag5mw

euoag5mw1#

您没有指定引导版本,因此根据“迁移到v5”文档,
已删除网格系统的特定于窗体的布局类。请使用网格和实用程序,而不要使用.form-group、.form-row或.form-inline。
因此,您只需创建一个2列行:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="row m-0">
  <div class="col-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>
  <div class="col-6">
    <label for="dms_id">DMS Employee Code</label>
    <input id="dms_id" name="dms_id" type="text" class="form-control">
  </div>
</div>

您可以通过设置容器widthmax-width来调整它们的大小。例如,您可以使用Bootstrap classesw-50mw-50

相关问题