Question

我是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作为模板引擎。

预先感谢您的帮助。

Answer 1

您仅在ul元素上设置了所需的类，但是根据Nav Pills documentation，您需要将nav-item类添加到li元素中，然后将{{ 1}}类到nav-link元素：

Bootstrap导航丸不起作用

1 个答案: