连续不足

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>

我想要这样的事情：

但由于某种原因，它不会在我的行组中响应，因为你可以在小提琴中看到：

任何人都知道我做错了什么？此致

Answer 1

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

请看这里

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-portlet__body">
        <div class="form-group m-form__group row">
            <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-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="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-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="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-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="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-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>

＆＃13;

＆＃13;

＆＃13;