如何使用Bootstrap 4实现表单输入框的水平均匀分布？

核心思路：用Bootstrap内置类替代冗余自定义CSS #

你现在的自定义CSS很多可以用Bootstrap原生类替代，既符合框架设计逻辑，又能减少样式冲突：

• 字体大小统一：给表单容器添加text-sm类，替代全局设置input/select的font-size
• 控件间距：用Bootstrap间距类mb-1替代margin-bottom:2px !important，更符合框架规范
• 内边距调整：给表单控件添加px-1类，替代自定义的padding-left/right设置
• 移除负边距hack：删掉col-form-label的拼写错误属性margim-right，通过调整网格列比例（比如col-6和col-5）优化标签与控件的对齐，避免负边距带来的布局问题

优化后的完整代码 #

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="col text-sm">
  <form id="headerForm">
    <div class="form-group row justify-content-end mb-1">
      <label id="orderPoLabel" for="order_po" class="col-6 col-form-label">Pedido de Venta:</label>
      <div class="col-5 pr-0">
        <select id="selectOrderPo" name="order_po" required="required" class="custom-select px-1">
          <option value=""></option>
        </select>
      </div>
    </div>
    <div class="form-group row justify-content-end mb-1">
      <label for="fabricPo" class="col-6 col-form-label">Pedido de Produción:</label>
      <div class="col-5 pr-0">
        <input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control px-1" disabled="">
      </div>
    </div>
    <div class="form-group row justify-content-end mb-1">
      <label for="poDate" class="col-6 col-form-label">Fecha:</label>
      <div class="col-5 pr-0">
        <input id="poDate" name="poDate" type="date" required="required" class="form-control px-1" placeholder="dd-mm-yyyy" onchange="orderDate1('Production');generateShipDate(getLeadTime(), 'Production')">
        <input id="npoDate" name="poDate" type="text" required="required" class="form-control px-1" placeholder="dd-mm-yyyy" onclick="orderDate()" hidden="">
      </div>
    </div>
    <div class="form-group row justify-content-end mb-1">
      <label for="leadTime" class="col-6 col-form-label">Plazo de Entrega:</label>
      <div class="col-5 pr-0">
        <input id="leadTime" name="leadTime" type="number" class="form-control px-1" onchange="generateShipDate(this, 'Production')" min="0" max="180">
      </div>
    </div>
    <div class="form-group row justify-content-end mb-1">
      <label for="text3" class="col-6 col-form-label">Fecha de Envío:</label>
      <div class="col-5 pr-0">
        <input id="shipDate" name="shipDate" type="text" class="form-control px-1" disabled="">
      </div>
    </div>
  </form>
</div>

CSS部分（仅保留必要自定义）

/* 仅保留框架未提供的自定义样式 */
.parent, .text-sm {
  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.custom-select:focus,
.form-control:focus {
  outline: none;
  box-shadow: 0 0 5pt 2pt #D3D3D3;
}

/* 如需固定select宽度，可添加自定义类，避免全局覆盖 */
.custom-select-fixed {
  width: 300px;
  height: 33px;
}

额外说明 #

• 如需固定select宽度，给目标select添加custom-select-fixed类即可，避免全局设置所有select的宽度
• Bootstrap 4的custom-select已包含border、border-radius等基础样式，无需重复定义，减少冗余代码

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