Html 引导导航栏赢得'；不显示_Html_Css_Twitter Bootstrap

Html 引导导航栏赢得'；不显示

html css twitter-bootstrap

Html 引导导航栏赢得'；不显示,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,因此，我想使用引导将导航栏添加到我的页面，但由于某些原因，它不会显示，我已经正确下载了引导文件和jquery 3.5.1以及所有内容，但我的导航栏仍然不会显示，我不确定这是否有帮助，但当我检查页面时（顺便说一句，控制台没有给出错误），它表明引导中的样式正在被覆盖解决方案分配模块-3！出现此错误是因为您添加了最新版本的引导CSS文件，并且最新版本不支持“导航栏默认值” 您可以像我在这里做的那样使用旧版本的引导CSS，或者根据最新版本的引导添加最新的导航条形码你可以试试这个代码 <

因此，我想使用引导将导航栏添加到我的页面，但由于某些原因，它不会显示，我已经正确下载了引导文件和jquery 3.5.1以及所有内容，但我的导航栏仍然不会显示，我不确定这是否有帮助，但当我检查页面时（顺便说一句，控制台没有给出错误），它表明引导中的样式正在被覆盖


解决方案分配模块-3！

出现此错误是因为您添加了最新版本的引导CSS文件，并且最新版本不支持“导航栏默认值”

您可以像我在这里做的那样使用旧版本的引导CSS，或者根据最新版本的引导添加最新的导航条形码

你可以试试这个代码

<!DOCTYPE html>
        <html lang = "en">
        <head>
          <meta charset ="utf-8">
          <meta name= "viewport" content = "width=device-width, initial-scale =1">
          <title>Solution Assignment Module-3!</title>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
          <link rel="stylesheet" href="css/styles.css">
        </head>
        <body>
    
         <header>
          <nav id="header-nav" class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a href="#" class="nav-link">menu1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu3</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu4</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu5</a>
                    </li>
                </ul>
            </div>
          </nav>
         </header>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        </body>
        </html>


解决方案分配模块-3！

当您没有输入任何其他导航组件（例如徽标、菜单项、折叠切换等）时，您希望显示什么我看到一个类似的事情正在进行，它应该会产生这样的效果，因此引导4不支持

navbar默认值

，您需要使用

navbar light bg light

或

navbar dark bg dark

或其他变体。因为导航栏组件的高度是由它的填充和其中的内容决定的。嗯，好吧，多亏了你，我明白了这一点，我还有另一个问题（如果你不介意的话），我基本上在3个部分使用col-md-4，每个部分的宽度基本上应该与浏览器的宽度相等，这意味着3个部分的宽度应该相等，添加边距可以给它们一些空间，这会导致第3部分进入下一行，我看不出这个outBootstrap的网格已经内置了边距。如果要对每列中的任何内容应用背景色，则应在包装器div（例如：

Lorem Epsom…

中，而不是对列本身应用背景色。