如何在Bootstrap 4容器内水平拉伸行？

核心问题分析 #

你的表格表头宽度总和超过了100%（原计算总和为105%），这导致表格无法在容器内正常拉伸，甚至出现列被隐藏的情况。另外，移除<div class="col">会破坏Bootstrap网格的布局规则，导致表格溢出容器。

具体修正步骤 #

1. 调整表头宽度，确保总和为100%
   重新分配各列宽度，避免超出容器范围。以下是调整后的表头代码：

   <tr>
     <th style="width:7%">Prenda</th>
     <th style="width:10%">Cliente</th>
     <th style="width:14%">Referencia</th>
     <th style="width:14%">Tela</th>
     <th style="width:9%">Color</th>
     <th style="width:4%">OS</th>
     <th style="width:4%">XS</th>
     <th style="width:4%">S</th>
     <th style="width:4%">M</th>
     <th style="width:4%">L</th>
     <th style="width:4%">XL</th>
     <th style="width:4%">2XL</th>
     <th style="width:4%">3XL</th>
     <th style="width:4%">Total</th>
     <th style="width:4%">Precio sin IVA</th>
     <th style="width:4%">Precio Total sin IVA</th>
     <th style="width:2%">Sel.</th>
   </tr>
   

   调整说明：将Color列从10%减至9%，三个5%的数值列改为4%，Sel.列从3%减至2%，总和刚好为100%。

2. 保留<div class="col">容器
   不要移除该元素，它是Bootstrap网格系统的必要组成部分，负责对齐容器内的元素并防止表格溢出到容器外。如果需要消除内边距，可以给该col添加padding-0类，与上方元素保持一致：

   <div class="col padding-0">
     <div id="po-items" class="table-responsive">
       <!-- 表格内容 -->
     </div>
   </div>
   

3. 确保表格占满容器宽度
   Bootstrap的table类默认已设置width:100%，无需额外添加样式。如果仍有问题，可以显式添加style="width:100%"到<table>标签。

修正后的完整表格区域代码 #

<div class="row" id="tableDiv">
  <div class="col padding-0">
    <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:7%">Prenda</th>
              <th style="width:10%">Cliente</th>
              <th style="width:14%">Referencia</th>
              <th style="width:14%">Tela</th>
              <th style="width:9%">Color</th>
              <th style="width:4%">OS</th>
              <th style="width:4%">XS</th>
              <th style="width:4%">S</th>
              <th style="width:4%">M</th>
              <th style="width:4%">L</th>
              <th style="width:4%">XL</th>
              <th style="width:4%">2XL</th>
              <th style="width:4%">3XL</th>
              <th style="width:4%">Total</th>
              <th style="width:4%">Precio sin IVA</th>
              <th style="width:4%">Precio Total sin IVA</th>
              <th style="width:2%">Sel.</th>
            </tr>
          </thead>
          <tbody id="tableRows">
            <!-- 表格行内容 -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

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