css - 连续住宿不佳

Question

我在 Bootstrap 4 中有这个表单组 fiddle :

<div class="m-portlet__body">
  <div class="form-group m-form__group row">
    <label class="col-lg-2 col-form-label">
                Correo electrónico
              </label>
    <div class="col-lg-3">
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    <label class="col-lg-2 col-form-label">
                Nombre
              </label>
    <div class="col-lg-3">
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    <label class="col-lg-2 col-form-label">
                Apellido
              </label>
    <div class="col-lg-3">
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    <label class="col-lg-2 col-form-label">
                Perfil
              </label>
    <div class="col-lg-3">
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
  </div>
</div>

我想要这样的东西:

但出于某种原因，它在我的行组中没有响应，正如您在 fiddle 中看到的那样:

有人知道我做错了什么吗？问候

Answer 1

这将完成这项工作。您需要将标签放在与输入相同的 div 中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="m-portlet__body">
  <div class="form-group m-form__group row">
    <div class="col-lg-3">
      <label>Correo electrónico</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    
    <div class="col-lg-3">
      <label>Nombre</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>

    <div class="col-lg-3">
      <label>Apellido</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    
    <div class="col-lg-3">
      <label>Perfil</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
  </div>
</div>

编辑:您需要全屏运行代码片段才能看到结果。显然，在较小的屏幕上，所有内容都在一栏中。它看起来与您的照片完全一样，这应该是您需要的。