在表单元格内部使用Bootstrap4 / Flexbox，将单元格分为2列，一列是绝对位置

Question

我有一个包含6个表格列的html表格。标题为“部件描述”的表列分为2个flexbox列。第一个flexbox列很好。第二个flexbox列就是问题。

第二列包含一个绝对定位的选择框，我想在表格单元格中右对齐。在单元格中，我使用flexbox div并将每个列包装在该div中。此codepen显示了我尝试将绝对定位的框[-Alternatives-]对齐到另一个表单元格[ORD QTY]

的右对齐的尝试。

Attempt1，第1行-使用引导程序类d-flex justify-content-between显示表格单元格。问题：[-替代-]框未包含在表格单元格中，并且覆盖了下一个单元格。

Attempt2，第2行-显示使用相同引导类的表格单元，内部列使用CSS弹性，布局略好。问题：表格单元格开始覆盖992px以下的屏幕宽度。.fb-1 {flex：1 1 auto; }.fb-2 {flex：2 1自动; }

Attempt3，第3行-使用相同的引导程序类显示表格单元，内部列使用CSS Flex和第一列设置flex-basis宽度。问题：表格单元格开始重叠在768px以下的屏幕宽度上。

理想情况下，我希望[-Alternatives-]框右对齐并停留在表格单元格内而不会流到表格单元外。也许Flexbox在这里不是理想的解决方案？

下面有问题的表格单元格的HTML代码：

   <tr class="part-row">
    <td class="part-lock part-select">&nbsp;</td>
    <td class="part part-select" data-weight="3.19KG/Per K" data-partinfo2="100/P100">H001-004-0030</td>
    <td class="part-select part-hover">
      <div class="d-flex justify-content-between">
        <div class="pr-0"><span class="part-desc">4017/933-8.8 4x30</span><br><span class="part-desc2">Flat Head Screw Full Thread</span></div>
        <div class="px-2">
          <div class="position-relative"><select class="hide part-alt-select part-alt-btn">
              <option value="">-&nbsp;Alternatives&nbsp;-</option>
              <option value="Original" data-alt="1">Original</option>
              <option value="Thread Options" data-alt="2">Thread Options</option>
              <option value="Coating Options" data-alt="3">Coating Options</option>
              <option value="Grade Options" data-alt="4">Grade Options</option>
              <option value="All" data-alt="5">All</option>
            </select></div>
        </div>
      </div>
    </td>
    <td><input class="part-select table-qty" type="number" name="qty-ord1" id="qty-ord1" min="100" step="100" data-uom-code="P100" value="0"></td>
    <td class="part-select product-add2-cart"><button type="button"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
    <td class="part-select jq-truck popwrap" style="text-align: left">
      <div class="d-flex justify-content-between">
        <div><img class="truck-img" src="/images/truck.png" alt="truck"><span class="part-cust"> &nbsp;</span></div>

      </div>
    </td>
  </tr>

Answer 1

如果我理解正确，则应关闭选择框的绝对位置，并将text-right添加到其父级中：

<tr class="part-row">
    <td class="part-lock part-select">&nbsp;</td>
    <td class="part part-select" data-weight="3.19KG/Per K" data-partinfo2="100/P100">H001-004-0030</td>
    <td class="part-select part-hover">
      <div class="d-flex justify-content-between">
        <div class="pr-0"><span class="part-desc">4017/933-8.8 4x30</span><br><span class="part-desc2">Flat Head Screw Full Thread</span></div>
        <div class="px-2 fb-1 text-right"> <!-- added a for text align right -->
          <div class="position-relative"><select class="hide part-alt-select part-alt-btn">
              <option value="">-&nbsp;Alternatives&nbsp;-</option>
              <option value="Original" data-alt="1">Original</option>
              <option value="Thread Options" data-alt="2">Thread Options</option>
              <option value="Coating Options" data-alt="3">Coating Options</option>
              <option value="Grade Options" data-alt="4">Grade Options</option>
              <option value="All" data-alt="5">All</option>
            </select></div>
        </div>
      </div>
    </td>
    <td><input class="part-select table-qty" type="number" name="qty-ord1" id="qty-ord1" min="100" step="100" data-uom-code="P100" value="0"></td>
    <td class="part-select product-add2-cart"><button type="button"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
    <td class="part-select jq-truck popwrap" style="text-align: left">
      <div class="d-flex justify-content-between">
        <div><img class="truck-img" src="/images/truck.png" alt="truck"><span class="part-cust"> &nbsp;</span></div>

      </div>
    </td>
  </tr>

和

select.part-alt-btn {
    position: relative; /* changed form absolute */
    font-size: 13px;
    padding: 2px 1px;
    color: white;
    background: #a5202d;
    border: 1px solid #65161e;
    margin: 2px 0 0;
    z-index: 9;
}