如何修复高度损坏的自举面包屑项目?

vvv vvv

我尝试使用引导程序制作面包屑线,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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

如何使其成为一条直线?

Nisharg Shah

使用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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章