时间戳

首页 > 解决方案 > 引导导航药丸不起作用

bootstrap-4 - 引导导航药丸不起作用

问题描述

我是 Bootstrap 的新手，我正在构建一个简单的应用程序来显示产品列表。但我注意到nav-pills产品表格下方的导航没有 CSS 效果。

这是我用作模板的详细 HTML：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<meta charset="utf-8"/>
<title>Produits</title>
</head>
<body>
</br>
</br>
<div class="container">
    <h3>Liste des Produits</h3>
    <table class="table">
        <thead>
            <tr> 
                <th>ID</th>
                <th>Désignation</th>
                <th>Prix</th>
                <th>Quantité</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="p:${listProduits}">
                <td th:text="${p.id}"></td>
                <td th:text="${p.designation}"></td>
                <td th:text="${p.prix}"></td>
                <td th:text="${p.quantite}"></td>
            </tr>
        </tbody>
    </table>
    </div>
<div class="container">
        <ul class="nav nav-pills">
            <li role="presentation" th:each="page,status:${totalPages}">
                <a href="#" th:text="${status.index}"> </a>
            </li>
        </ul>
</div>
</body>
</html>

请注意，我使用 Thymeleaf 作为模板引擎。

在此先感谢您的帮助。

标签： bootstrap-4thymeleaf

解决方案

You only set the required classes on the ul element, but according to the Nav Pills documentation, you need to add nav-item class to the li elements, and nav-link class to the a elements:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="#">Active</a>
  </li>
  ...
</ul>

推荐阅读