html – 调整bootstrap导航栏菜单高度

html – 调整bootstrap导航栏菜单高度,第1张

概述我在bootstrap中开发了一个多行菜单,我使用了一个bootstrap css类“nav-justified”来表示每个菜单的宽度相等. “nav-justified”类对于相等的宽度非常有效.但我需要另一个高度相等的选项,保持该部分每个菜单的高度相等.我在下面以图形方式添加了我的问题: nav.navbar { width: 100%; border: none; 我在bootstrap中开发了一个多行菜单,我使用了一个bootstrap CSS类“nav-justifIEd”来表示每个菜单的宽度相等. “nav-justifIEd”类对于相等的宽度非常有效.但我需要另一个高度相等的选项,保持该部分每个菜单的高度相等.我在下面以图形方式添加了我的问题:

nav.navbar {      wIDth: 100%;      border: none;      margin: 0;      padding: 0;      background: #adadad;      border-bottom: 1px solID #8e8e8e      /*#8e8e8e*/      ;    }    nav.navbar-fixed-top {      height: 150px;      position: fixed;      margin-left: 5px;      margin-right: 5px;      top: 26px;      bottom: 0;      right: 0;      left: 0;      float: none;      padding: 5px 5px 0px 5px;      background: #adadad;      /*mask-image: linear-gradIEnt(90deg,rgba(255,255,0) 0%,#202020 25%,#202020 75%,0) 100%);*/      Box-shadow: 0 0 25px rgba(0,0.1),inset 0 0 1px rgba(255,0.6);    }    nav .container-fluID {      padding-right: 0px;      padding-left: 0px;      height: 100%;    }    .navbar-header .navbar-toggle .icon-bar {      background-color: black;    }    ul.top-menu {      /*wIDth: 100%;*/      border: none;      margin: 0px 0px 0px 0px;      padding: 0;      /*height: 44px;*/      border-bottom: 1px solID #bbbbbb;      border-radius: 6px;      background: #5c5a5a;      /* Safari 4-5,Chrome 1-9 */      background: -webkit-gradIEnt(linear,0% 0%,0% 100%,from(#5c5a5a),to(#3d3b3b));      /* Safari 5.1,Chrome 10+ */      background: -webkit-linear-gradIEnt(top,#3d3b3b,#5c5a5a);      /* firefox 3.6+ */      background: -moz-linear-gradIEnt(top,#5c5a5a);      /* IE 10 */      background: -ms-linear-gradIEnt(top,#5c5a5a);      /* Opera 11.10+ */      background: -o-linear-gradIEnt(top,#5c5a5a);      vertical-align: mIDdle;      background: #353535;      /* old browsers */      background: -moz-linear-gradIEnt(top,#353535 0%,#5c5a5a 50%,#303030 100%);      /* FF3.6+ */      background: -webkit-gradIEnt(linear,left top,left bottom,color-stop(0%,#353535),color-stop(50%,#5c5a5a),color-stop(100%,#303030));      /* Chrome,Safari4+ */      background: -webkit-linear-gradIEnt(top,#303030 100%);      /* Chrome10+,Safari5.1+ */      background: -o-linear-gradIEnt(top,#303030 100%);      /* Opera 11.10+ */      background: -ms-linear-gradIEnt(top,#303030 100%);      /* IE10+ */      background: linear-gradIEnt(to bottom,#303030 100%);      /* W3C */      filter: progID: DXImagetransform.Microsoft.gradIEnt(startcolorstr='#353535',endcolorstr='#303030',GradIEntType=0);      Box-shadow: 0 0 25px rgba(0,0.6);    }    ul.top-menu > li.active {      background: #ff0000;      /* Safari 4-5,from(#6f0505),to(#ff0000));      /* Safari 5.1,#ff0000,#6f0505);      /* firefox 3.6+ */      background: -moz-linear-gradIEnt(top,#6f0505);      /* IE 10 */      background: -ms-linear-gradIEnt(top,#6f0505);      /* Opera 11.10+ */      background: -o-linear-gradIEnt(top,#6f0505);      outline: none;    }    ul.top-menu > li:last-child.active {      border-top-right-radius: 6px;      border-bottom-right-radius: 6px;    }    ul.top-menu > li:first-child.active {      border-top-left-radius: 6px;      border-bottom-left-radius: 6px;    }    ul.top-menu > li:hover {      cursor: pointer;      background: linear-gradIEnt(180deg,0.2) 25%,0.2) 75%,0) 100%);      Box-shadow: 0 0 25px rgba(0,0.6);    }    ul.top-menu > li:last-child:hover {      border-top-right-radius: 6px;      border-bottom-right-radius: 6px;    }    ul.top-menu > li:first-child:hover {      border-top-left-radius: 6px;      border-bottom-left-radius: 6px;    }    ul.sub-menu {      /*wIDth: 100%;*/      border: none;      margin: 0;      padding: 0;      vertical-align: mIDdle;    }    ul.sub-menu > ul > li {      display: block;      /*wIDth: 100%;*/      border: none;      margin: 0;      padding: 0;      vertical-align: mIDdle;    }    ul.sub-menu > li > ul > li > a {      text-align: left;      vertical-align: mIDdle;      /*height: auto;*/      /*wIDth: 100%;*/      color: #101010;      Font-size: 10pt;      white-space: nowrap;      text-transform: cAPItalize;      text-shadow: 1px 1px 1px rgba(200,200,0.9);    }    ul.sub-menu > li > ul > li > a:hover {      cursor: pointer;      background: linear-gradIEnt(180deg,0.6);      color: #000;    }    ul.dropdown-menu {      margin-top: -2px;      /*position:relative;*/      wIDth: 100%;      margin: 0;      padding: 0;      overflow: hIDden;    }    li.dropdown:hover > ul.dropdown-menu {      display: block;    }    .dropdown-submenu {      position: relative;    }    .dropdown-submenu > .dropdown-menu {      top: 0px;      left: 100%;      margin-top: -1px;      margin-left: -1px;      Box-sizing: border-Box;    }    .dropdown-submenu:hover > .dropdown-menu {      display: block;    }    .dropdown-submenu > a:after {      display: block;      content: " ";      float: right;      wIDth: 0;      height: 0;      border-color: transparent;      border-left-color: #ccc;      margin-top: 5px;      margin-right: -10px;    }    .dropdown-submenu:hover > a:after {      border-left-color: #fff;    }    .dropdown-submenu.pull-left {      float: none;    }    .dropdown-submenu.pull-left > .dropdown-menu {      left: -100%;      margin-left: 10px;      -webkit-border-radius: 6px 0 6px 6px;      -moz-border-radius: 6px 0 6px 6px;      border-radius: 6px 0 6px 6px;    }    .dropdown-menu > ul > ul {      border-radius: 0px;      wIDth: 100%;    }    .dropdown-menu > li > a {      display: block;      padding: 5px 20px;      clear: both;      Font-weight: normal;      line-height: 1.42857143;      color: #101010;      Font-size: 10pt;      white-space: nowrap;      text-transform: cAPItalize;      wIDth: 100%;    }    .dropdown-menu > li > a:hover {      background: #ff0000;    }    .dropdown-menu > li {      /*Box-shadow:0 1px 1px rgba(0,0.1);*/      Box-sizing: border-Box;      border-bottom: 0.5px solID #d5d5d5;      border-top: 0.5px solID #f9f9f9;      border-radius: 0px;      min-wIDth: 260px;      wIDth: 100%;      background: #f2f2f2;      text-align: left;    }    .dropdown-menu > ul > li > a {      Box-sizing: border-Box;      border-radius: 0px;      wIDth: 100%;    }    .dropdown-toggle > i {      text-align: right;      right: 10px;      position: absolute;      overflow: hIDden;      line-height: 1.42857143;    }    .dropdown-menu > li.manage-bar {      background: #bbbbbb;    }    .dropdown-menu > li.manage-bar a {      color: #101010;    }    .dropdown-menu > li.report-bar {      background: #bbbbbb;    }    .dropdown-menu > li.report-bar a {      color: #101010;    }
<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.1/jquery.min.Js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/Js/bootstrap.min.Js"></script><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/CSS/bootstrap.min.CSS" rel="stylesheet" /><nav  role="navigation">  <div >    <!-- Brand and toggle get grouped for better mobile display -->    <div >      <button type="button"  data-toggle="collapse" data-target="#menu-navbar-collapse-1">        <span >Toggle navigation</span>        <span ></span>        <span ></span>        <span ></span>      </button>      <!--<a  href="#">Brand</a>-->    </div>    <!-- Collect the nav links,forms,and other content for toggling -->    <div  ID="menu-navbar-collapse-1">      <ul >        <li >          <a href="#">HOME</a>        </li>        <li>          <a href="#">GARMENTS</a>        </li>        <li>          <a href="#">YARN DYEING</a>        </li>        <li>          <a href="#">KNITTING</a>        </li>        <li>          <a href="#">FABRIC DYEING</a>        </li>        <li>          <a href="#">COMMON MODulES</a>        </li>        <li>          <a href="#">GENERAL SETTING</a>        </li>      </ul>      <ul >        <li>          <ul  >            <li >              <a href="#"  data-toggle="dropdown">admin                                                             <span ></span>                      </a>              <ul  role="menu">                <li>                  <a href="#">Action</a>                </li>                <li>                  <a href="#">Another action</a>                </li>                <li>                  <a href="#">Something else here</a>                </li>                <li>                  <a href="#">Separated link</a>                </li>                <li>                  <a href="#">One more separated link</a>                </li>              </ul>            </li>          </ul>          <ul  >            <li>              <a href="#">HELP</a>            </li>          </ul>        </li>        <li>          <ul >            <li>              <a href="#">SUPPORT</a>            </li>          </ul>          <ul >            <li >              <a href="#"  data-toggle="dropdown">CHAT                                                            <span ></span>                      </a>              <ul  role="menu">                <li>                  <a href="#">Action</a>                </li>                <li>                  <a href="#">Another action</a>                </li>                <li>                  <a href="#">Something else here</a>                </li>                <li>                  <a href="#">Separated link</a>                </li>                <li>                  <a href="#">One more separated link</a>                </li>              </ul>            </li>          </ul>        </li>        <li>          <ul >            <li>              <a href="#">NO MENU</a>            </li>          </ul>          <ul >            <li>              <a href="#">NO MENU</a>            </li>          </ul>        </li>        <li>          <ul >            <li>              <a href="#">NO MENU</a>            </li>          </ul>          <ul >            <li>              <a href="#">NO MENU</a>            </li>          </ul>        </li>      </ul>    </div>    <!-- /.navbar-collapse -->  </div>  <!-- /.container-fluID --></nav>

编辑================================================= =

我在plunker修复了这个问题

但是另一个问题是引导下降d出窗口在IE中没有正确显示,如下所示
 

我需要这个解决方案,这是在Chrome和mozila工作,我的问题是什么?

解决方法 完整的解决方案就在这里

HTML代码

HTML {    Font-size: 10px;    position: relative;    min-height: 100%;    -ms-text-size-adjust: 100%;    -webkit-text-size-adjust: 100%;}HTML,body {    overflow-x: hIDden;    height: 100%;    margin: 0;}body {    background: #efeff0 /*url('../img/background.jpg') no-repeat*/;    background-size: cover;    background-attachment: fixed;    /*Font: 300 16px 'segoe',Helvetica,Arial,sans-serif;*/    background-color: #efeff0;    color: #303030;    Font-family: segoe,"Helvetica Neue",sans-serif;    Font-size: 14px;    line-height: 1.42857;    height: 100%;    wIDth: 100%;    position: absolute;    /*border:5px solID #5f5f5f;*/    overflow: hIDden;}/* Customize the nav-justifIEd links to be fill the entire space of the .navbar */.navbar-header .navbar-toggle .icon-bar {    background-color: black;}.nav-justifIEd > li > a {    color: inherit;}.nav-justifIEd > .active > a,.nav-justifIEd > .active > a:hover,.nav-justifIEd > .active > a:focus {    background-image: none;    background: none;    -webkit-Box-shadow: inset 0 3px 7px rgba(0,.15);    Box-shadow: inset 0 3px 7px rgba(0,.15);}.nav-justifIEd > li:first-child > a {    /*border-radius: 5px 5px 0 0;*/}.nav-justifIEd > li:last-child > a {    /*border-bottom: 0;        border-radius: 0 0 5px 5px;*/}.nav-justifIEd > li > a:hover {    background: none;    background-image: none;}.nav > li > a {    padding: 5px 10px 0px 20px;}@media (min-wIDth: 768px) {    /*.nav-justifIEd {        max-height: 52px;    }*/    .nav-justifIEd > li > a {        border-right: 0.5px solID #404040;        border-left: 0.5px solID #353535;        color: #fff;        text-align: left;    }    .nav-justifIEd > li:first-child > a {        border-left: 0;        border-radius: 6px 0 0 6px;    }    .nav-justifIEd > li:last-child > a {        border-right: 0;        border-radius: 0 6px 6px 0;    }}.navbar-collapse {    border-top: 0px solID #4b4b4b;    /*padding:0px 5px 0px 5px;*/}/*.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {    padding: 5px 5px 0px 5px;}*/.container > .navbar-header,.container-fluID > .navbar-header,.container > .navbar-collapse,.container-fluID > .navbar-collapse {    margin: 0px 5px 0px 5px;}nav.navbar-fixed-top {    height: 150px;    position: fixed;    top: 26px;    bottom: 0;    right: 0;    left: 0;    float: none;    background: #adadad;    /*mask-image: linear-gradIEnt(90deg,0) 100%);*/    Box-shadow: 0 0 25px rgba(0,0.6);}.navbar-fixed-top,.navbar-fixed-bottom {    position: relative;}nav .container-fluID {    padding-right: 0px;    padding-left: 0px;    overflow: visible;}nav.navbar {    /*display: block;*/    wIDth: 100%;    border: none;    margin: 0;    padding: 0;    background: #adadad;    border-bottom: 1px solID #8e8e8e /*#8e8e8e*/;}ul.top-menu {    wIDth: 100%;    border: none;    margin: 5px 0px 0px 0px;    padding: 0;    min-height: 44px;    border-bottom: 1px solID #bbbbbb;    border-radius: 6px;    background: #5c5a5a;    /* Safari 4-5,Chrome 1-9 */    background: -webkit-gradIEnt(linear,to(#3d3b3b));    /* Safari 5.1,Chrome 10+ */    background: -webkit-linear-gradIEnt(top,#5c5a5a);    /* firefox 3.6+ */    background: -moz-linear-gradIEnt(top,#5c5a5a);    /* IE 10 */    background: -ms-linear-gradIEnt(top,#5c5a5a);    /* Opera 11.10+ */    background: -o-linear-gradIEnt(top,#5c5a5a); /*Box-shadow: 2px 2px 2px rgba(0,0.40);    -moz-Box-shadow: 2px 2px 2px rgba(0,0.40);    -o-Box-shadow: 2px 2px 2px rgba(0,0.40);    -webkit-Box-shadow: 2px 2px 2px rgba(0,0.40);    -ms-Box-shadow: 2px 2px 2px rgba(0,0.40);*/    vertical-align: mIDdle;    background: #353535; /* old browsers */    background: -moz-linear-gradIEnt(top,#303030 100%); /* FF3.6+ */    background: -webkit-gradIEnt(linear,#303030)); /* Chrome,Safari4+ */    background: -webkit-linear-gradIEnt(top,#303030 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradIEnt(top,#303030 100%); /* Opera 11.10+ */    background: -ms-linear-gradIEnt(top,#303030 100%); /* IE10+ */    background: linear-gradIEnt(to bottom,#303030 100%); /* W3C */    filter: progID:DXImagetransform.Microsoft.gradIEnt( startcolorstr='#353535',GradIEntType=0 ); /* ie6-9 */    /*background:url(NEXTIT.CK.GS.WebClIEnt/Content/images/admin-logo.png) #fff;*/    /*mask-image: linear-gradIEnt(90deg,0.6); /*background:white;  background:rgba(255,0.8);*/    /*filter:blur(4px);  -o-filter:blur(4px);  -ms-filter:blur(4px);  -moz-filter:blur(4px);  -webkit-filter:blur(4px);*/}    ul.top-menu > li > a {        color: #fff;        Font-weight: normal;    }    ul.top-menu > li.active {        background: #ff0000;        /* Safari 4-5,Chrome 1-9 */        background: -webkit-gradIEnt(linear,to(#ff0000));        /* Safari 5.1,Chrome 10+ */        background: -webkit-linear-gradIEnt(top,#6f0505);        /* firefox 3.6+ */        background: -moz-linear-gradIEnt(top,#6f0505);        /* IE 10 */        background: -ms-linear-gradIEnt(top,#6f0505);        /* Opera 11.10+ */        background: -o-linear-gradIEnt(top,#6f0505);        outline: none;    }    ul.top-menu > li:last-child.active {        border-top-right-radius: 6px;        border-bottom-right-radius: 6px;    }    ul.top-menu > li:first-child.active {        border-top-left-radius: 6px;        border-bottom-left-radius: 6px;    }    ul.top-menu > li:hover {        /*background-color: #f00;*/        /*border-radius:6px;*/        /*background:rgba(255,0.2);*/        cursor: pointer;        /*background: -moz-linear-gradIEnt(top,rgba(0,0.2) 0%,0.5) 50%,0.2) 100%); background: -webkit-gradIEnt(linear,0.2)),0.2))); background: -webkit-linear-gradIEnt(top,0.2) 50%,0.2) 100%); background: -o-linear-gradIEnt(top,0.2) 100%); background: -ms-linear-gradIEnt(top,0.2) 100%); background: linear-gradIEnt(to bottom,0.2) 100%); filter: progID:DXImagetransform.Microsoft.gradIEnt( startcolorstr='#33000000',endcolorstr='#33000000',GradIEntType=0 ); -webkit-Box-shadow: inset 5px rgba(0,.2),0 0 8px rgba(102,175,233,0.6);  Box-shadow: inset 5px rgba(0,0.6);*/        background: linear-gradIEnt(180deg,0) 100%);        Box-shadow: 0 0 25px rgba(0,0.6);    }    ul.top-menu > li:last-child:hover {        border-top-right-radius: 6px;        border-bottom-right-radius: 6px;    }    ul.top-menu > li:first-child:hover {        border-top-left-radius: 6px;        border-bottom-left-radius: 6px;    }ul.sub-menu {    wIDth: 100%;    height: 100px;    border: none;    margin: 0;    padding: 0;    vertical-align: mIDdle;    List-style: none;    display: block; /*Box-shadow: 2px 2px 2px rgba(0,0.40);	-moz-Box-shadow: 2px 2px 2px rgba(0,0.40);	-o-Box-shadow: 2px 2px 2px rgba(0,0.40);	-webkit-Box-shadow: 2px 2px 2px rgba(0,0.40);	-ms-Box-shadow: 2px 2px 2px rgba(0,0.40);*/}    ul.sub-menu > li {        height: 100px;        border: none;        margin: 0;        padding: 0;        vertical-align: mIDdle;        List-style: none;    }        ul.sub-menu > li > div {            height: 100%;            display: table;            table-layout: fixed;            border-collapse: collapse;            wIDth: 100%;        }            ul.sub-menu > li > div > ul {                display: table-row;            }                ul.sub-menu > li > div > ul > li {                    display: table-cell;                    wIDth: 100%;                    border: none;                    margin: 0;                    padding: 0;                    vertical-align: mIDdle;                    padding-left: 20px;                    height: auto;                }                    ul.sub-menu > li > div > ul > li > a {                        text-align: left;                        text-decoration: none;                        height: 100%;                        line-height: 100%;                        display: table;                        content: "";                        clear: both;                        vertical-align: mIDdle;                        wIDth: 100%;                        color: #101010;                        Font-size: 10pt;                        white-space: nowrap;                        text-transform: cAPItalize;                        text-shadow: 1px 1px 1px rgba(200,0.9);                        padding: 0px;                    }                        ul.sub-menu > li > div > ul > li > a > span {                            line-height: 100%;                            display: table-cell;                            vertical-align: mIDdle;                            clear: both;                        }                            ul.sub-menu > li > div > ul > li > a > span i {                                float: right;                                margin-right: 14px;                                content: "";                                clear: both;                                /*margin-top: -18px;    right: 10px;    text-align: right;*/                            }                        ul.sub-menu > li > div > ul > li > a:hover {                            background: none;                        }                    ul.sub-menu > li > div > ul > li:hover {                        cursor: pointer;                        background: linear-gradIEnt(180deg,0) 100%);                        /*-webkit-Box-shadow:0px 1px 1px rgba(0,0.1);    -moz-Box-shadow:0px 1px 1px rgba(0,0.1);    Box-shadow:0px 1px 1px rgba(0,0.1);*/                        Box-shadow: 0 0 25px rgba(0,0.6);                        color: #000;                    }/*ul.sub-menu > li > div > ul > li.dropdown > ul.dropdown-menu {                        top: 100%;                    }*/ul.dropdown-menu {    wIDth: 100%;    margin: 0;    padding: 0;}li.dropdown:hover > ul.dropdown-menu {    display: block;}.dropdown-submenu {    position: relative;}    .dropdown-submenu > .dropdown-menu {        top: 0px;        left: 100%;        margin-top: -2px;        margin-left: -1px;        /*-webkit-border-radius: 0 6px 6px 6px;        -moz-border-radius: 0 6px 6px;        border-radius: 0 6px 6px 6px;*/        /*Box-shadow: 0 1px 1px rgba(0,0.1);*/        Box-sizing: border-Box;    }    .dropdown-submenu > .dropToleft {        left: auto;        right: 100%;        top: 0px;        /*position:relative;*/    }    .dropdown-submenu:hover > .dropdown-menu {        display: block;    }    .dropdown-submenu > a:after {        display: block;        content: " ";        float: right;        wIDth: 0;        height: 0;        border-color: transparent;        border-left-color: #ccc;        margin-top: 5px;        margin-right: -10px;    }    .dropdown-submenu:hover > a:after {        border-left-color: #fff;    }    .dropdown-submenu.pull-left {        float: none;    }        .dropdown-submenu.pull-left > .dropdown-menu {            left: -100%;            margin-left: 10px;            -webkit-border-radius: 6px 0 6px 6px;            -moz-border-radius: 6px 0 6px 6px;            border-radius: 6px 0 6px 6px;        }.dropdown-menu > ul > ul {    border-radius: 0px;    wIDth: 100%;}.dropdown-menu > li > a {    display: block;    padding: 5px 20px;    clear: both;    Font-weight: normal;    line-height: 1.42857143;    color: #101010;    Font-size: 10pt;    white-space: nowrap;    text-transform: cAPItalize;    wIDth: 100%;}    .dropdown-menu > li > a:hover {        background: #ff0000;    }.dropdown-menu > li:hover {    background: #ff0000;}.dropdown-menu > li {    /*Box-shadow:0 1px 1px rgba(0,0.1);*/    Box-sizing: border-Box;    border-bottom: 0.5px solID #d5d5d5;    border-top: 0.5px solID #f9f9f9;    border-radius: 0px;    wIDth: 100%;    background: #f2f2f2;    text-align: left;}.dropdown-menu > ul > li > a {    /*Box-shadow:0 1px 1px rgba(0,0.1);*/    Box-sizing: border-Box;    /*border-bottom:1px solID rgba(0,0.40);    border-top:1px solID #ccc;*/    border-radius: 0px;    wIDth: 100%;}.dropdown-toggle > i {    text-align: right;    right: 10px;    position: absolute;    overflow: hIDden;    line-height: 1.42857143;}.dropdown-menu > li.manage-bar {    background: #bbbbbb;}    .dropdown-menu > li.manage-bar a {        color: #101010;    }.dropdown-menu > li.report-bar {    background: #bbbbbb;}    .dropdown-menu > li.report-bar a {        color: #101010;    }
<!DOCTYPE HTML><HTML><head>  <Meta charset="utf-8" />  <Meta http-equiv="X-UA-Compatible" content="IE=edge" />  <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1" />  <Meta name="description" content="" />  <Meta name="author" content="" />  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script>  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/CSS/bootstrap.CSS" />  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/Js/bootstrap.Js"></script>  <link rel="stylesheet" href="style.CSS" />  <script src="script.Js"></script></head><body>   <nav  role="navigation">    <div >        <!-- Brand and toggle get grouped for better mobile display -->        <div >            <button type="button"  data-toggle="collapse" data-target="#menu-navbar-collapse-1">                <span >Toggle navigation</span>                <span ></span>                <span ></span>                <span ></span>            </button>            <!--<a  href="#">Brand</a>-->        </div>        <!-- Collect the nav links,and other content for toggling -->        <div  ID="menu-navbar-collapse-1">            <ul >                <li ><a href="#">HOME</a></li>                <li><a href="#">GARMENTS</a></li>                <li><a href="#">YARN DYEING</a></li>                <li><a href="#">KNITTING</a></li>                <li><a href="#">FABRIC DYEING</a></li>                <li><a href="#">COMMON MODulES</a></li>                <li><a href="#">GENERAL SETTING</a></li>            </ul>            <ul >                <li>                    <div>                        <ul>                            <li ><a href="#"  data-toggle="dropdown"><span>admin <span ></span></span></a>                                <ul  role="menu">                                    <li><a href="#">Action</a></li>                                    <li><a href="#">Another action</a></li>                                    <li><a href="#">Something else here</a></li>                                    <li><a href="#">Separated link</a></li>                                    <li ><a href="#"  data-toggle="dropdown">Manage                                        <span ></span>                                    </a>                                        <ul  role="menu">                                            <li><a href="#">Action</a></li>                                            <li><a href="#">Another action</a></li>                                            <li><a href="#">Something else here</a></li>                                            <li><a href="#">Separated link</a></li>                                            <li><a href="#">One more separated link</a></li>                                        </ul>                                    </li>                                </ul>                            </li>                        </ul>                        <ul>                            <li><a href="#"><span>HELP</span></a></li>                        </ul>                    </div>                </li>                <li>                    <div>                        <ul>                            <li><a href="#"><span>HELP</span></a></li>                        </ul>                        <ul>                            <li ><a href="#"  data-toggle="dropdown"><span>CHAT<span ></span></span></a>                                <ul  role="menu">                                    <li><a href="#">Action</a></li>                                    <li><a href="#">Another action</a></li>                                    <li><a href="#">Something else here</a></li>                                    <li ></li>                                    <li><a href="#">Separated link</a></li>                                    <li ></li>                                    <li><a href="#">One more separated link</a></li>                                </ul>                            </li>                        </ul>                    </div>                </li>                <li>                    <div>                        <ul>                            <li><a href="#"><span>NO MENU</span></a></li>                        </ul>                        <ul>                            <li><a href="#"><span>NO MENU</span></a></li>                        </ul>                    </div>                </li>                <li>                    <div>                        <ul>                            <li><a href="#"><span>NO MENU</span></a></li>                        </ul>                        <ul>                            <li ><a href="#"  data-toggle="dropdown"><span>admin<span ></span></span></a>                                <ul  role="menu">                                    <li><a href="#">Action</a></li>                                    <li><a href="#">Another action</a></li>                                    <li><a href="#">Something else here</a></li>                                    <li><a href="#">Separated link</a></li>                                    <li ><a href="#"  data-toggle="dropdown">Manage <span ></span></a>                                        <ul  role="menu">                                            <li><a href="#">Action</a></li>                                            <li><a href="#">Another action</a></li>                                            <li><a href="#">Something else here</a></li>                                            <li><a href="#">Separated link</a></li>                                            <li><a href="#">One more separated link</a></li>                                        </ul>                                    </li>                                </ul>                            </li>                        </ul>                    </div>                </li>            </ul>        </div>        <!-- /.navbar-collapse -->    </div>    <!-- /.container-fluID --></nav></body></HTML>
总结

以上是内存溢出为你收集整理的html – 调整bootstrap导航栏菜单高度全部内容,希望文章能够帮你解决html – 调整bootstrap导航栏菜单高度所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存