JavaScript-Bootstrap 5导航没有父容器宽-堆栈溢出

顺晟科技

2022-10-19 14:04:36

我已经在容器内的Bootstrap中创建了一个导航，但是由于某种原因，导航栏没有容器宽，但是为什么呢？我甚至不得不手动设置导航栏的填充。

代码： index.php

   <!DOCTYPE html>
    <html lang="cs">
        <head>
            <title>xGhost.cz | Československý Gamehosting.</title>
            <!-- meta data -->
            <meta name="author" content="Jan Dvořák">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- styles -->
            <link rel="stylesheet" href="css/style.css">
            <!-- BOOTSTRAP START -->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
            <!-- BOOTSTRAP END -->      
        </head>
        <body>
            <div class="container-lg">
                <nav class="navbar navbar-expand-md navbar-dark bg-dark my-5">
                    <a class="navbar-brand" href="#">xGhost.cz</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
    
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
                        </ul>
                    </div>
                </nav>
    
                <div class="row">
                    <div class="content col-md-8">Col here ok? content</div>
                    <div class="login col-md-4">Col here ok? login</div>
                </div>
            </div>
        </body>
    </html>

style.css

   <!DOCTYPE html>
    <html lang="cs">
        <head>
            <title>xGhost.cz | Československý Gamehosting.</title>
            <!-- meta data -->
            <meta name="author" content="Jan Dvořák">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- styles -->
            <link rel="stylesheet" href="css/style.css">
            <!-- BOOTSTRAP START -->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
            <!-- BOOTSTRAP END -->      
        </head>
        <body>
            <div class="container-lg">
                <nav class="navbar navbar-expand-md navbar-dark bg-dark my-5">
                    <a class="navbar-brand" href="#">xGhost.cz</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
    
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
                        </ul>
                    </div>
                </nav>
    
                <div class="row">
                    <div class="content col-md-8">Col here ok? content</div>
                    <div class="login col-md-4">Col here ok? login</div>
                </div>
            </div>
        </body>
    </html>

以下是预览： https://jsfiddle.net/ld9f5a0e/

顺晟科技：

必须在类为

的容器中包装

有一些正的and，但必须加上White and是负的，这将取消。

的效果

上一篇：HTML-如何在按钮下放置下拉列表- 下一篇：PHP-为什么自定义CSS文件不再工

网站建设

Html

JavaScript-Bootstrap 5导航没有父容器宽-堆栈溢出