引导自动列宽，但所有列仍使用 100% 的父宽度

Posted 2023-03-05

【中文标题】引导自动列宽，但所有列仍使用 100% 的父宽度

【英文标题】：Bootstrap auto column width but all columns still use 100% of parent width

【发布时间】：2022-01-17 06:52:30

【问题描述】：

我有一个有两列的<div>。 （我使用两列，所以我可以左对齐左列，右对齐右列。）

<div class="section-header">
    <div class="row">
        <div class="col-md-6">
            <img src="~/images/ttexpand.png" class="expand-handle" />
            Dates and ETAs
        </div>
        <div class="col-md-6 text-right">
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

但是一列可以容纳比另一列更多的内容，我不确定还有多少。因此，如果需要，我希望列调整大小，为包含更多内容的列提供更多宽度。

为此，我找到了col-md-auto 类。

<div class="section-header">
    <div class="row">
        <div class="col-md-auto">
            <img src="~/images/ttexpand.png" class="expand-handle" />
            Dates and ETAs
        </div>
        <div class="col-md-auto text-right">
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

这正确地为具有更多内容的列提供了更多宽度。但是，这两列一起不再占用父级宽度的 100%。

有没有办法让两列一起用完所有可用宽度，但仍然为内容更多的列提供更多宽度？也许类似于我可以设置表格宽度的方式，但是列宽是自动的？

【参考方案1】：

改用这个。

<div class="section-header">
    <div class="d-flex justify-content-between">
        <div>
            <img src="~/images/ttexpand.png" class="expand-handle" />
            Dates and ETAs
        </div>
        <div>
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

它会为你工作。

【讨论】：

是的，这很好用。您介意添加一段关于它的工作原理和原因的段落吗？

任何阅读本文的人，请注意第二个<div> 中的text-right 类在这里不再需要。第二个<div> 将自动右对齐。

感谢您的评论