我尝试使用引导程序制作面包屑线,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>
如何使其成为一条直线?
使用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] 删除。
我来说两句