html – Navbar在Bootstrap 3中切换,不使用’navbar-default’类_html-js-css

概述当宽度减小时,我试图让我的导航和页脚链接折叠成切换按钮,但没有使它们具有类“navbar-default”(该类将另一个导航栏添加到我的导航栏并使其看起来很难看). 这是我的标题导航HTML的示例： <div class="header" id="header-container"> <div class="container" id="header"> <but 当宽度减小时,我试图让我的导航和页脚链接折叠成切换按钮,但没有使它们具有类“navbar-default”(该类将另一个导航栏添加到我的导航栏并使其看起来很难看).

这是我的标题导航HTML的示例：

<div  ID="header-container">    <div  ID="header">            <button  data-toggle="collapse" data-target="#header-collapse-1"><span >Toggle navigation</span>                <span ></span>                <span ></span>                <span ></span>            </button>        <ul  ID="header-collapse-1">          <li><a href="/">Home</a></li>          <li><a href="/about">About</a></li>          <li><a href="/img/resume.pdf" target="_blank">Resume</a></li>          <li><a href="/contact">Contact</a></li>        </ul>        <h3>Title</h3>    </div></div>

导航按钮消失,但没有切换按钮打开手风琴.如果有解决方法可以显示切换按钮,请告诉我.

解决方法我能想到的唯一方法是向导航栏添加一个类,并创建一些规则来覆盖只有该类的元素的导航栏.

考虑添加这两个规则(并根据需要自定义样式)： –

.custom-nav-bar.navbar-toggle {    background-color: #ddd; /*Background color for holder*/}.custom-nav-bar.navbar-toggle .icon-bar {    background-color: #888; /*Background color for bar in the holder*/}

并将custom-nav-bar添加到navbar-toggle元素

<button  data-toggle="collapse" data-target="#header-collapse-1">

.custom-nav-bar.navbar-toggle {   background-color: #ddd;}.custom-nav-bar.navbar-toggle .icon-bar {    background-color: #888;}

<!DOCTYPE HTML><HTML>  <head>    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script>    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/Js/bootstrap.min.Js"></script>    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/CSS/bootstrap.min.CSS" />    <link rel="stylesheet" href="style.CSS" />    <script src="script.Js"></script>  </head>  <body>    <div  ID="header-container">    <div  ID="header">                <button  data-toggle="collapse" data-target="#header-collapse-1">                <span >Toggle navigation</span>                <span ></span>                <span ></span>                <span ></span>            </button>          <div  ID="header-collapse-1">        <ul  >          <li><a href="/">Home</a></li>          <li><a href="/about">About</a></li>          <li><a href="/img/resume.pdf" target="_blank">Resume</a></li>          <li><a href="/contact">Contact</a></li>        </ul>         </div>        </div></div>  </body></HTML>

总结

以上是内存溢出为你收集整理的html – Navbar在Bootstrap 3中切换,不使用’navbar-default’类全部内容，希望文章能够帮你解决html – Navbar在Bootstrap 3中切换,不使用’navbar-default’类所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1069819.html