时间戳

首页 > 解决方案 > 如何修复高度损坏的引导程序面包屑项目？

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

问题描述

我尝试使用引导程序制作面包屑线，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>

如何让它变成一条直线？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

用于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>

推荐阅读