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

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">&nbsp; &nbsp; <!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->&nbsp; &nbsp; <div class="navbar-nav container">&nbsp; &nbsp; &nbsp; &nbsp; <ol class="breadcrumb mr-auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="breadcrumb-item d-flex">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a th:href="@{/account/notebooks}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-book"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Notebooks&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="breadcrumb-item d-flex">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a th:href="@{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div th:text="${notebook.title}">Test</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="breadcrumb-item d-flex" th:if="${currentNote} != null">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ol>&nbsp; &nbsp; </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>