html 导航栏添加重叠

f0brbegy  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(143)

我使用引导程序5.2
主要部分似乎被导航部分隐藏了一种重叠

<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar">
    <div class="container-fluid">
        <a class="navbar-brand logo" href="#">Doc</a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1">
            <span class="visually-hidden">Togglenavigation</span>
            <span clasn="navbar-toggler-icon"></span>
        </button>

        <div id="navcol-1" class="collapse navbar-collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="client.html">Client</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/users">Utilisateur</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/template">Template</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main class="container" id="main" role="main">
    <button type="button" class="btn btn-primary">Add a new userr</button>

    <table data-toggle="table">
        <thead>
            <tr>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
            </tr>
        </tbody>
    </table>
</main>

结果给予

我可以补充到主要的:

margin-top: 60px;

但这肯定是一个干净的方式吗?

相关问题