Question

我已经创建了一个带有引导程序的导航栏菜单，但它似乎在设备上表现得很奇怪＆gt; 992宽。菜单似乎在最后3个链接上丢失了背景颜色，并且它没有滚动条。

我创造了一个小提琴navbar fiddle，告诉你我的意思。如果宽度低于992，则导航栏菜单会很好地折叠，但是一旦达到该魔术媒体设备编号，导航栏就会失去滚动功能或背景颜色。

有人可以告诉我我需要做些什么来解决这个问题吗？

<nav class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg" id="my-navbar">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span style="background-color:white" class="icon-bar"></span>
                <span style="background-color:white" class="icon-bar"></span>
                <span style="background-color:white" class="icon-bar"></span>
                <span style="background-color:white" class="icon-bar"></span>
            </button>
        </div><!-- end navbar-header -->


        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav-body">
<li><a  href="My Link 1" target="_blank">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
<li><a  href="My Link 1" class="">My Link 1</a></li>
</ul>
        </div>

    </div><!-- end container -->
</nav><!-- end navbar -->

我的CSS

header .logo {
width: 120px;
height: auto;
position: absolute;
display: block;
margin: 0 auto;
background: transparent;
padding-left: 0;
left: 50%;
margin-left: -60px;
transition: all 0.3s ease-in-out 0.05s;
z-index: 2;
}



p, li, h1, h2, h3, h4, h5, h6 {
font-family:Arial, Helvetica, sans-serif;
}

p {
line-height: 1.5em;
}

a, h1, h1, h2, h3, h4, h5, h6 {
color: #4286f4;
}

a:hover {color: #4286f4;}

h1 {
font-size: 2em;
margin: 0.67em 0;
}



header .header-social {
position: absolute;
display: block;
width: 25px;
height: 150px;
top: 10px;
right: 15px;
z-index: 2;
}

header .header-social {
float: right;
display: inline-block;
position: relative;
padding: 15px;
width: auto;
top: unset;
right: unset;
height: auto;
}

header .header-social ul li {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #4286f4;
margin-right: 5px;
}

 header .header-social ul li a path {
 fill: white;
 }

button.navbar-toggle {background-color: #4286f4;}

.navbar-nav {background-color: #fff;}

.navbar-default .navbar-nav > li > a {
color: #585960;
display: block;
line-height:.8em;
font-family:Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 0.85em;
background-color: #fff;
border-style: solid;
border-color:#cccccc;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
}


.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #4286f4;
}

.navbar-brand {height: 70px;}


ul.nav-body {
list-style-type: none;
margin: 0;
padding: 0;
background: transparent none repeat scroll 0 0; 



}

.nav-body > li a {


color: #585960;
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bolder;
padding: 10px;

position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;

border-bottom: 1px solid #f1f1f1;

overflow: auto; 



}


.nav-body > li a:hover {
background-color: #555;
color: #fff;
}


.nav-body > li a.selectedPage   {
background: #4286f4;
color: #fff;
}



@media (min-width: 768px) {
header .logo {
left: 0;
padding-left: 30px;
width: 180px;
height: 180px;
margin-left: 0;
}

}

@media (max-width: 991px) {
body {padding-top: 70px;}


.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}



.navbar-collapse.collapse.in { 
    display: block!important;
}


.collapsing {
    overflow: hidden!important;
}


}

Answer 1

导航条未显示的原因是因为您的navbar-header代码仅在@media (min-width: 768px) {...媒体查询中。你可以在中型和大型屏幕上隐藏导航栏。

我发布了一个分叉here with it showing up on the larger screens。

除了我上面所说的hidden-md hidden-lg课程之外，您的nav课程中navbar-header还有overflow-y: auto!important;，仅包含在您的媒体查询中。

为了解决滚动条在较大的屏幕上消失，请在.navbar-collapse.collapse.in中添加visible。这将覆盖引导实现，使其(min-width: 768px)上的config.x.cache_config = config_for(:cache)。

Bootstrap NavBar Max-Height

1 个答案: