如何防止下拉菜单内的 Bootstrap 列表内联换行？

Question

在此代码片段中，按日期行分为两行，第一行是“最近的第一行”，第二行是“最早的第一行”。

我使用

.list-inline

尝试将项目强制放到一行上，但它仍然换行。

如何使其只有两行，如下所示：

By title:  A-Z     Z-A
By date:   Recent first    Oldest first

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 date:</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>

我尝试过使用 flex 和 nowrap 类，但无济于事 - 条目可以存在于一行上，但问题似乎是

.dropdown-menu .row

元素的宽度无法扩展以适应其中的所有内容，所以它溢出了。

Answer 1

在第一个 div 上使用

div class="dropdown-menu"

添加

width: max-content

然后我将

.row > *

的最大宽度从 100% 更改为

.row > * {
    ...
    max-width: fit-content;
    ...
}

第二个更改适用于引导程序，因此您需要

!important

。

.dropdown-menu { width: max-content }
.row > * { max-width: fit-content !important; }
/* Remove width from columns. */
div[class^="col-"], div[class*=" col-"] { width: auto !important; }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 very long datum:</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>