Bootstrap布局求助：图片旁展示输入字段及按钮位置调整

我来帮你搞定这个布局问题！核心是利用Bootstrap的网格系统来规整元素位置，既实现图片和表单并排，又能让输入框自动撑满剩余宽度，同时把删除按钮放到图片正下方。

修正后的完整代码 #

<div class="row">
  <!-- 左侧图片区域 -->
  <div class="col-md-3 mb-4">
    <label for="profile-pic">
      <input type="file" id="profile-pic" />
      <img [src]="profilePic" class="img-fluid pr-4 pb-4" style="cursor:pointer; max-width:300px; max-height:300px;" />
    </label>
    <!-- 删除按钮放在图片同列的下方 -->
    <button type="button" class="btn btn-danger w-100" (click)="...">
      Delete image
    </button>
  </div>

  <!-- 右侧表单区域 -->
  <div class="col-md-9">
    <!-- 第一行：Email输入框 -->
    <div class="form-group mb-3">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email" name="email">
    </div>

    <!-- 第二行：三个姓名输入框 -->
    <div class="row">
      <div class="form-group col-12 col-md-4 mb-3">
        <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 mb-3">
        <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 mb-3">
        <label for="surname">Surname</label>
        <input type="text" class="form-control" id="surname" name="surname">
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• 网格划分：用row包裹图片列（col-md-3）和表单列（col-md-9），中等屏幕及以上时两部分并排，小屏幕自动堆叠，适配响应式需求。图片用max-width和max-height限制尺寸，同时加img-fluid保证适配小屏幕。
• 删除按钮位置：把删除按钮和图片放在同一个col-md-3容器里，自然就会出现在图片正下方，用w-100让按钮宽度填满列（和图片对齐）。
• 输入框宽度适配：右侧表单的输入框借助Bootstrap的列类（比如col-md-4），自动撑满所在列的宽度，不需要用display:inline-block，完美解决宽度不足的问题。
• 间距优化：加了mb-3/mb-4类来控制元素间的margin，让布局更美观。

这样调整后，你的布局需求就完全满足啦！

内容的提问来源于stack exchange，提问作者Rexam