[英]Bootstrap navbar dropdown displaying menu-items horizontally
I've been working on a new project where a navbar required to be center of the page at top. 我一直在进行一个新项目,其中导航栏必须位于页面顶部。 I have the following html...
我有以下html ...
<div class="navbar navbar-inverse navbar-fixed-top center">
<div class="container navbar-inner">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- //.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- //.collapse -->
</div> <!-- //.container .navbar-inner -->
</div> <!-- //.navbar -->
and css, which sets the menu-items to center. 和CSS,将菜单项设置为居中。
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
margin: 0;
padding: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align: center;
}
However the dropdown toggle function seems to display the options horizontally upon medium screen size . 但是,下拉切换功能似乎在中等屏幕尺寸时 水平显示选项。 (can't post picture...not enough reputation~sorry!)
(无法发布图片...信誉不足〜对不起!)
How can I get the dropdown toggle function to display menu-items vertically as a list (how the default should be) without affecting menu-items being centered on desktop screen size ? 如何获得下拉切换功能,以垂直显示菜单项作为列表(默认值应如何显示), 而又不影响以桌面屏幕尺寸为中心的菜单项? Any help would be appreciated!!
任何帮助,将不胜感激!!
You should wrap your custom CSS code inside media queries. 您应该将自定义CSS代码包装在媒体查询中。
@media (min-width: 992px)
will affect the elements only in desktop screen size. @media (min-width: 992px)
将仅在桌面屏幕尺寸中影响元素。 Learn more about the Grid system 了解有关网格系统的更多信息
html, body { margin: 0; padding: 0; width: 100%; } .container { margin: 0; padding: 0; } @media (min-width: 992px) { .center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-inverse navbar-fixed-top center"> <div class="container navbar-inner"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- //.navbar-header --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#project">Project</a> </li> <li><a href="#resume">Resume</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!-- //.collapse --> </div> <!-- //.container .navbar-inner --> </div> <!-- //.navbar -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.