在此片段中，By date行分为两行，第一行是"最近的优先"，第二行是"最古老的优先".
我用了.list-inline试图将这些物品强制放在一行上，但它仍然包裹着.
如何使其只有两行，就像这样:
By title: A-Z Z-A
By a much
longer field: Recent first Oldest first
请注意，左侧列大小相等且向右对齐.无论列的宽度如何，情况都应该如此.包裹左侧栏是可以的.如果包装，右侧列值应与中间垂直对齐(上面未表示).
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button class="btn btn-primary-soft btn-sm dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true">
<i class="fa-solid fa-fw fa-sort me-1"></i>
<span> By title: A-Z </span>
</button>
<div class="dropdown-menu" data-popper-placement="bottom-start">
<div class="row">
<div class="dropdown-item-text col-4 text-end pe-0 fw-bold">By Title:</div>
<div class="col">
<ul class="list-inline">
<li class="list-inline-item">
<a type="button" rel="sort-by" class="dropdown-item link-primary ps-2 pe-2 disabled active">A-Z</a>
</li>
<li class="list-inline-item">
<a rel="sort-by" class="dropdown-item link-primary ps-2 pe-2 text-decoration-underline" href="javascript:;" type="button">Z-A</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="dropdown-item-text col-4 text-end pe-0 fw-bold">By a much longer field:</div>
<div class="col">
<ul class="list-inline">
<li class="list-inline-item">
<a rel="sort-by" class="dropdown-item link-primary sort-link ps-2 pe-2 text-decoration-underline" href="javascript:;" type="button">Recent first</a>
</li>
<li class="list-inline-item">
<a rel="sort-by" class="dropdown-item link-primary sort-link ps-2 pe-2 text-decoration-underline" href="javascript:;" type="button">Oldest first</a>
</li>
</ul>
</div>
</div>
</div>
</div>我try 过玩Flex和nowrap类，但没有效果-可以使条目存在于一行上，但问题似乎是.dropdown-menu .row个元素的宽度没有扩展以容纳其中的所有内容，所以它溢出.