如何在Bootstrap 4容器中拉伸表单组？

调整内边距无法解决问题，需要将表单字段从当前位置拉伸至右侧。当前效果与预期效果对比：

问题根源是Bootstrap列布局的宽度分配不合理：原表单组中标签用col-4、输入框容器也用col-4，仅占用部分宽度。按以下方式修改即可实现需求：

1. 调整HTML列结构 #

将每个表单组中输入框所在的div的col-4替换为col，让输入框容器自动填充剩余宽度；同时可将标签的col-4改为col-3（或根据视觉需求调整），避免标签过宽浪费空间：

<!-- 示例：修改单个表单组 -->
<div class="form-group row" style="display: flex; justify-content: flex-end">
  <label for="select" class="col-3 col-form-label">Order:</label>
  <div class="col">
    <select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
      <option value="TTL-220218" selected="">TTL-2131231</option>
    </select>
  </div>
</div>

所有表单组都做同样修改。

2. 优化CSS（可选） #

• 移除标签上固定的width:140px，避免与Bootstrap列类冲突：

label {
  color: #292727;
  font-weight: bold;
  font-size: 13px;
  text-align: right;
  /* 删掉 width: 140px; */
}

• 确保输入框/下拉框占满容器宽度：

.form-group input, .form-group select {
  width: 100%;
  height: 36px;
  padding-left: 3px;
  padding-right: 3px;
}

完整修改后代码 #

CSS #

input[type='text'],
.txtarea {
  margin-bottom: 3px;
}

.form-group input, .form-group select {
  width: 100%;
  height: 36px;
  padding-left: 3px;
  padding-right: 3px;
}

.form-group {
  margin-bottom: 2px !important;
}

.padding-0 {
  padding-right: 0;
  padding-left: 0;
}

label {
  color: #292727;
  font-weight: bold;
  font-size: 13px;
  text-align: right;
}

label[for='notes'] {
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  display: block;
}

.container-fluid {
  max-width: 99%;
}

HTML #

<html>
<head>
  <base target="_top">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid px-5" id="container1">
  <div class="row d-flex flex-wrap align-items-center">
    <div class="col">
      <img class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
    </div>
    <div id="unitSpot" style="display: none;">Fabric</div>
    <div class="col">
      <form id="headerForm">
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="select" class="col-3 col-form-label">Order:</label>
          <div class="col">
            <select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
              <option value="TTL-220218" selected="">TTL-2131231</option>
            </select>
          </div>
        </div>
        <div class="form-group row" style="display: flex;justify-content: flex-end;">
          <label for="fabricPo" class="col-3 col-form-label">PO:</label>
          <div class="col">
            <input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
          </div>
        </div>
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="poDate" class="col-3 col-form-label">PO Date:</label>
          <div class="col">
            <input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
          </div>
        </div>
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="leadTime" class="col-3 col-form-label">Lead Time:</label>
          <div class="col">
            <input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
          </div>
        </div>
        <div class="form-group row" style="display: flex; justify-content: flex-end">
          <label for="text3" class="col-3 col-form-label">Ship Date:</label>
          <div class="col">
            <input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
</html>

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