如何修复高度损坏的引导程序面包屑项目？

Question

我尝试使用引导程序制作面包屑线，thymeleaf但它有一个奇怪的破碎高度。像这样代码<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">    <!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->    <div class="navbar-nav container">        <ol class="breadcrumb mr-auto">            <li class="breadcrumb-item">                <a th:href="@{/account/notebooks}">                    <i class="fas fa-book"></i>                    Notebooks                </a>            </li>            <li class="breadcrumb-item">                <a th:href="@{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">                    <div th:text="${notebook.title}"></div>                </a>            </li>            <li class="breadcrumb-item" th:if="${currentNote} != null">                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${currentNote.name}">                </a>            </li>        </ol>    </div></nav><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>怎么让它变成一条直线呢？

Answer 1

用于flexbox直线上的集合元素。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">

    <!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->

    <div class="navbar-nav container">

        <ol class="breadcrumb mr-auto">

            <li class="breadcrumb-item d-flex">

                <a th:href="@{/account/notebooks}">

                    <i class="fas fa-book"></i>

                    Notebooks

                </a>

            </li>

            <li class="breadcrumb-item d-flex">

                <a th:href="@{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">

                    <div th:text="${notebook.title}">Test</div>

                </a>

            </li>

            <li class="breadcrumb-item d-flex" th:if="${currentNote} != null">

                <a class="nav-link dropdown-toggle p-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${currentNote.name}">Test

                </a>

            </li>

        </ol>

    </div>

</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>