带有表单输入的引导表不会缩小答案

【问题标题】：Bootstrap table with form input doesn't shrink带有表单输入的引导表不会缩小
【发布时间】：2021-02-07 04:04:03
【问题描述】：

我正在尝试使用引导程序制作一个可编辑的表格。因此，它必须包含一些输入。表格列的宽度通常适合其内容。 Bootstrap 的form-control 设置了width: 100%，但是我觉得太大了，希望输入更小。

我在another question 中发现我可以在我的输入中使用w-auto 来绕过它。但是，当我这样做时，表格似乎并没有将列大小缩小到它的内容。

我想我应该以某种方式告诉表格必须扩展哪一列来填充空间。我尝试将w-100 设置为另一列，但它破坏了另一列中的另一个input-group。

<table class="table table-sm">
  <thead>
    <th>Problematic column</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <td class="table-danger"><input type="number" class="form-control w-auto"></td>
    <td>Something else</td>
    <td>
      <div class="input-group">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">X</button>
        </div>
        <input type="text" class="form-control"/>
      </div>
    </td>
  </tbody>
</table>

See plunker

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

我不是 100% 确定你到底想要实现什么，但我认为你想要这种行为？

在您的第一个输入字段周围添加 input-group div 并删除 w-auto 类。

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <script src="lib/script.js"></script>
  </head>

  <div class="container">
    <table class="table table-sm">
      <thead>
        <th>Problematic column</th>
        <th>2</th>
        <th>3</th>
      </thead>
      <tbody>
        <td class="table-danger">
          <div class="input-group">
             <input type="number" class="form-control">
           </div>
        </td>
        <td>Something else</td>
        <td>
          <div class="input-group">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button">X</button>
            </div>
            <input type="text" class="form-control"/>
          </div>
        </td>
      </tbody>
    </table>
  </div>
</html>

【讨论】：