如何用Bootstrap 4让行Div垂直拉伸并占满容器宽度？

添加class="col"会缩小表格宽度，但表格列数较多，每列宽度都很关键；设置class="row"时，即便加上row d-flex flex-wrap align-items-center align-items-stretch，也无法让行Div垂直拉伸以充分利用屏幕空间。相关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>标签，需删除 -->
  </head>

<div class="col" id="tableDiv">
  <div class="row">
    <div id="po-items" class="table-responsive">
      <div class="card" id="card">
        <table class="table table-hover table-vcenter" id="dtable">
          <thead>
            <tr>
              <th style="width:18%">Tela</th>
              <th style="width:2%; display:none">Name</th>
              <th style="width:15%">Color</th>
              <th style="width:10%">Pantone</th>
              <th style="width:15%">Contenido</th>
              <th style="width:2%; display:none">Construction</th>
              <th style="width:7%">Acho (m)</th>
              <th style="width:5%">Peso (gsm)</th>
              <th style="width:7%">Precio/m (USD)</th>
              <th style="width:8%">Metros (m)</th>
              <th style="width:10%">Precio Total sin IVA (COP)</th>
              <th style="width:5%">Sel.</th>
            </tr>
          </thead>
          <tbody id="tableRows">
            <tr>
              <td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
              <td style="display:none">R</td>
              <td><input type="text" name="tableInputs" value="Black"></td>
              <td><input type="text" name="tableInputs" value=""></td>
              <td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
              <td style="display:none"></td>
              <td><input type="text" name="tableInputs" value="1.27"></td>
              <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="406" onchange="add_to_total(this)"></td>
              <td class="total_price">$2,686.24</td>
              <td><input type="checkbox"></td>
            </tr>
            <tr>
              <td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
              <td style="display:none">R</td>
              <td><input type="text" name="tableInputs" value="Iron Gate"></td>
              <td><input type="text" name="tableInputs" value=""></td>
              <td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
              <td style="display:none"></td>
              <td><input type="text" name="tableInputs" value="1.27"></td>
              <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="265" onchange="add_to_total(this)"></td>
              <td class="total_price">$1,753.34</td>
              <td><input type="checkbox"></td>
            </tr>
            <tr>
              <td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
              <td style="display:none">L</td>
              <td><input type="text" name="tableInputs" value="Wine"></td>
              <td><input type="text" name="tableInputs" value=""></td>
              <td><input type="text" name="tableInputs" value="79 poly / 21 span"></td>
              <td style="display:none"></td>
              <td><input type="text" name="tableInputs" value="1.27"></td>
              <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.28827647" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="127Add YldAdd Yld" onchange="add_to_total(this)"></td>
              <td class="total_price"><strong>$0.00</strong></td>
              <td><input type="checkbox"></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
              <td id="totalValue" class="total">$4,439.58</td>
            </tr>
          </tfoot>
        </table>
        <div class="row"><label for="notes">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
        <div class="col recebido-por"><span class="recibido-por">Recibido por:</span><span class="line"></span></div>
      </div>
    </div>
  </div>
</div>

要实现行Div垂直拉伸并占满容器宽度，可按以下方式调整：

1. 修正外层容器结构与类名

   • 移除最外层的col类，改用w-100 h-100 d-flex flex-column确保容器占满父级宽度和高度，同时让内部元素垂直分布。
   • 给包裹表格的row添加flex-grow-1，让它自动填充剩余垂直空间。

2. 让表格容器填充空间

   • 给table-responsive和card添加h-100 flex-grow-1类，确保它们拉伸至父容器高度，避免出现空白区域。

3. 优化表格宽度适配

   • 移除列的固定百分比宽度，改用CSS设置min-width保证每列有最小显示宽度，避免小屏幕下过度挤压：

     #dtable th, #dtable td {
       min-width: 70px; /* 根据实际需求调整数值 */
     }
     

   • 保留table-responsive类，确保小屏幕下表格可横向滚动，兼顾桌面端的宽度利用。

4. 修复HTML语法错误

   • 删除head标签内多余的</script>闭合标签，避免影响样式和脚本加载。

调整后的核心容器代码：

<div class="w-100 h-100 d-flex flex-column" id="tableDiv">
  <div class="row flex-grow-1">
    <div id="po-items" class="table-responsive h-100 w-100">
      <div class="card h-100 flex-grow-1" id="card">
        <!-- 表格及内部内容保持不变 -->
      </div>
    </div>
  </div>
</div>

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