Bootstrap 4表格列中窄宽text_field与按钮同行居中实现方案

我来帮你搞定这个布局难题！你遇到的核心问题是：不用<input-group>时按钮会换行，用了又会破坏表格列的原有布局。其实不用依赖<input-group>，利用Bootstrap 4自带的Flexbox工具类就能轻松解决。

解决方案思路 #

Bootstrap 4内置了一系列flex布局工具类，我们可以用它们让表单内的输入框和按钮水平排列，同时在表格列中居中对齐，而且不会影响其他列的宽度布局：

• d-flex：把容器转为flex布局，内部元素默认水平排列
• justify-content-center：让内容在水平方向居中
• align-items-center：让内容在垂直方向居中
• 用ml-1（或mr-1）给按钮和输入框之间添加一点间距，提升美观度

修改后的代码 #

你可以把原来的<div class="input-group">替换成flex容器，或者直接给表单添加flex类，这里提供两种简洁写法：

写法1：外层包裹flex容器

<td class="center">
  <div class="d-flex justify-content-center align-items-center">
    <%= form_for user, remote: true do |f| %>
      <%= f.text_field :field, class: "form-control center", style: "width:85px;" %>
      <%= f.button data: {confirm: "Are you sure?"}, class: "btn btn-light ml-1" do %>
        <i class="fa fa-pencil" aria-hidden="true"></i>
      <% end %>
    <% end %>
  </div>
</td>

写法2：直接给表单添加flex类（更简洁）

<td class="center">
  <%= form_for user, remote: true, html: { class: "d-flex justify-content-center align-items-center mb-0" } do |f| %>
    <%= f.text_field :field, class: "form-control center", style: "width:85px;" %>
    <%= f.button data: {confirm: "Are you sure?"}, class: "btn btn-light ml-1" do %>
      <i class="fa fa-pencil" aria-hidden="true"></i>
    <% end %>
  <% end %>
</td>

注：给表单加mb-0是为了消除form默认的底部外边距，避免表格行高度被不必要地撑开。

为什么这个方案有效？ #

• Flex布局会让输入框和按钮自然同行，不会像默认块级元素那样换行
• justify-content-center确保整个表单内容在表格列内水平居中，不会出现左移的问题
• 这种方式不会强制拉伸容器宽度，表格列的宽度会由内容自动决定，不会干扰其他列的布局
• 完全使用Bootstrap内置类，不需要额外写自定义CSS，兼容性更好

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