Css 在图像旁边显示输入字段

我有一个300x300像素的图像显示在我的网页左侧，就在它旁边，我想显示两行输入字段。我正在使用引导，当我试图将行放在图像的一侧时，这会导致列表示法出现问题

例如，我尝试使用

display:inline块并且，即使它工作正常，输入字段也不会扩展到边距，直到行的末尾

有人能帮忙吗

这是我的（干净的）代码：


删除图像
电子邮件
名称
姓
姓

我想要的布局应该大致如下图所示：


您在“我的代码”中看到的按钮应该放在左边，直接放在图像下方。
尝试使用
display:flex。这样处理对齐就容易多了。希望此测试代码对您有所帮助


.d-flex{
显示器：flex；
}
.弹性行{
弯曲方向：行；
}
.柔性柱{
弯曲方向：立柱；
}
.电子邮件容器{
边框：3倍纯黑；
填充：10px；
边缘底部：20px；
文本对齐：居中；
}
.名称容器{
边框：3倍纯黑；
填充：10px；
}
mr-2{
保证金权利：0.5雷姆；
}
.验证资源中心的合理性{
证明内容：中心；
}

电子邮件
名称
姓
姓
您可以通过使用引导类
col-**


。表单组{
页边距底部：0！重要；
}
设置等高列的步骤
/*.行{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
柔性包装：包装；
}
.row>[class*='col-']{
显示器：flex；
弯曲方向：立柱；
}*/

引导示例


删除图像
电子邮件
名称
姓
姓
您还有css样式表吗？或者你只想用bs类做任何事情？@MihaiT我有一个样式表，所以我可以同时使用引导和自定义样式类。请检查下面的代码片段，如果你需要任何更改，一定要让我知道。如果你有样式表，为什么不与我们共享呢？：）这很重要
<label for="profile-pic">
   <input type="file" id="profile-pic" ... />
   <img [src]="profilePic" class="pr-4 pb-4" height="300" width="300" style="cursor:pointer"/> 
</label>

<button
   type="button"
   class="btn btn-danger mb-3"
   style="width: 280px;"
   (click)="..."
>
Delete image
</button>

<div class="row">
   <div class="form-group col-12">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email" name="email">
   </div>
</div>

<div class="row">
   <div class="form-group col-12 col-md-4">
     <label for="name">Name</label>
     <input type="text" class="form-control" id="name" name="name">
   </div>

   <div class="form-group col-12 col-md-4">
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" id="lastName" name="lastName">
  </div>

  <div class="form-group col-12 col-md-4">
    <label for="surname">Surname</label>
    <input type="text" class="form-control" id="surname" name="surname">
  </div>
</div>