引导窗体布局问题

Question

我一直在尝试一个基本的Bootstrap表单布局，但有一段时间没有成功。基本上，我只想让化身在左边，然后把4个输入放在右边，分为2列。这就是我所拥有的，但有些间距我无法消除：https://prnt.sc/u8xeft我的代码：

<div class="card-body">
<div class="form-group row">
<div class="col-lg-2">
<div class="image-input image-input-outline" id="kt_image_1">
<div class="image-input-wrapper" style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)"></div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
<input type="hidden" name="profile_avatar_remove"/>
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
<div class="col-lg-5">
<label>Nome próprio:</label>
<input type="text" name="firstName" class="form-control" value="<?php echo $userInfo[0]["first_name"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um nome válido
</div>
</div>
<div class="col-lg-5">
<label>Apelido:</label>
<input type="text" name="lastName" class="form-control" value="<?php echo $userInfo[0]["last_name"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um apelido válido
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2"></div>
<div class="col-lg-5">
<label>Telefone:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="la la-phone"></i></span></div>
<input type="tel" name="telephone" minlength="9" maxlength="9" class="form-control" value="<?php echo $userInfo[0]["telephone"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um número de telefone válido
</div>
</div>
</div>
<div class="col-lg-5">
<label>Email:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="la la-at"></i></span></div>
<input type="email" type="email" name="email" class="form-control" value="<?php echo $userInfo[0]["email"];?>" autocomplete="off" required/>
<div class="invalid-feedback">
Por favor insira um email válido
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-lg-3">
<button id="btn_save" name="submit" type="submit" class="btn btn-primary mr-2" style="background: linear-gradient(45deg, rgba(3,130,138,1) 50%, rgba(176,209,51,1) 100%);color: white;border: white;" disabled><i class="far fa-save"></i> Guardar</button>
<button type="reset" class="btn btn-secondary mr-2">Cancelar</button>
</div>
</div>

Answer 1

像一样更改HTML

<div class="card-body">
<div class="form-group row">
<div class="col-lg-2">
<div class="image-input image-input-outline" id="kt_image_1">
<div class="image-input-wrapper"
style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="profile_avatar_remove" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-6">
<label>Nome próprio:</label>
<input type="text" name="firstName" class="form-control" value="" autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um nome válido
</div>
</div>
<div class="col-lg-6">
<label>Apelido:</label>
<input type="text" name="lastName" class="form-control" value="" autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um apelido válido
</div>
</div>
<div class="col-lg-6">
<label>Telefone:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i
class="la la-phone"></i></span></div>
<input type="tel" name="telephone" minlength="9" maxlength="9" class="form-control" value=""
autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um número de telefone válido
</div>
</div>
</div>
<div class="col-lg-6">
<label>Email:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i
class="la la-at"></i></span></div>
<input type="email" type="email" name="email" class="form-control" value=""
autocomplete="off" required />
<div class="invalid-feedback">
Por favor insira um email válido
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-lg-3">
<button id="btn_save" name="submit" type="submit" class="btn btn-primary mr-2"
style="background: linear-gradient(45deg, rgba(3,130,138,1) 50%, rgba(176,209,51,1) 100%);color: white;border: white;"
disabled><i class="far fa-save"></i> Guardar</button>
<button type="reset" class="btn btn-secondary mr-2">Cancelar</button>
</div>
</div>

https://jsfiddle.net/lalji1051/k6wrhq0y/4/

Answer 2

您有一行用于图像、名字、姓氏，另一行用于电子邮件和电话。

您应该将电子邮件与姓氏分组，将电话与名字分组。

你的结构可能是这样的：

-Row
|
|-Col Image
|-Col
|- Row Name Propio
|- Row Telefone
|-Col
|- Row Apelido
|- Row Email