Bootstrap下如何实现表单右对齐并在div右侧放置图片

问题核心 #

现有代码中图片与表单均为块级元素，默认纵向堆叠排列，需要调整为图片居左、表单居右的横向并排布局。

调整方法 #

直接使用已引入的Bootstrap 4自带弹性布局+栅格类即可实现，无需编写额外自定义CSS：

• 给最外层container-fluid容器添加 d-flex align-items-start 类，开启弹性布局，设置内部子元素顶部对齐
• 给图片套一层带 col-auto mr-4 类的容器，col-auto让容器宽度自适应图片本身尺寸，mr-4给图片右侧加适当间距，避免和表单贴太近
• 给<form>标签添加 col 类，让表单自动占据容器剩余的全部宽度，原有表单项的排版逻辑完全不需要改动

修改后完整代码 #

<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container-fluid d-flex align-items-start py-3" id="container">
      <!-- 左侧图片区域 -->
      <div class="col-auto mr-4">
        <img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="标识图" width="100" height="100">
      </div>
      <!-- 右侧表单区域 -->
      <form class="col">
        <div class="form-group row">
          <label for="selectOrderPo" class="col-2 col-form-label">Order PO #</label>
          <div class="col-3">
            <select id="selectOrderPo" name="select" required="required" class="custom-select">
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
          <div class="col-3">
            <input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
          </div>
        </div>
        <div class="form-group row">
          <label for="poDate" class="col-2 col-form-label">PO Date</label>
          <div class="col-3">
            <input id="poDate" name="poDate" type="text" required="required" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="leadTime" class="col-2 col-form-label">Lead Time</label>
          <div class="col-3">
            <input id="leadTime" name="leadTime" type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="text3" class="col-2 col-form-label">Ship Date</label>
          <div class="col-3">
            <input id="text3" name="text3" type="text" class="form-control">
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

补充说明 #

• 额外给容器加的py-3是给容器上下加内边距，避免内容贴到浏览器边缘，不需要可以直接删除
• 如果需要调整图片和表单的间距，修改mr-*的数值即可，数字越大间距越宽
• 所有用到的类都是Bootstrap 4原生类，和当前引入的资源版本完全兼容，不会出现样式冲突

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