标签: navbar
bootstrap navbar-static-top菜单在两行中断
我遇到了bootstrap导航栏的问题.
我使用navbar-static-top制作菜单 - 起初它一切都很好.当菜单被扩展并且添加了少量项目,并且现在具有之前要折叠的宽度时,它将分散成两行看起来很糟糕.在CSS bootstrap'a深入挖掘,但没有太大的成功.请帮帮忙,怎么来这里？
目前看起来如下所示:
导航条代码:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="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>
<a class="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Features<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="features.html">Features</a></li>
<li><a href="screenshots.html">Screenshots</a></li>
<li class="active"><a href="usage.html">Usage</a></li>
</ul>
</li>
<li><a href="features.html">Features</a></li>
<li><a href="screenshots.html">Screenshots</a></li>
<!--li class="active"><a href="usage.html">Usage</a></li-->
<li><a href="download.html">Download</a></li>
<li><a href="purchase.html">Purchase</a></li>
<!--li class="dropdown"> …推荐指数
解决办法
查看次数
如何拉伸Bootstrap导航栏的元素以利用整个宽度？
请考虑以下Bootstrap导航栏:
关于此导航栏的一些事实:
- 条形本身正好宽620px(页面宽度)
- 条形图是响应式的(折叠断点为640px)
- 酒吧的元素粘在一起(两者之间没有空格)
- 该栏具有多语言支持(元素的宽度变化)
如何拉伸条形元素以利用整个宽度？右侧剩余的空白区域应分布在条形元素中.由于每个元素具有不同的宽度,并且此宽度可能因语言而异,因此我无法使用百分比.我想唯一的解决方案是JavaScript.但我找不到任何例子......
Js Fiddle演示:http://jsfiddle.net/zBM6D/3/
<body>
<div id="page">
<header id="header">
<nav class="navbar navbar-default roboto normal" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation-elements">
<ul class="nav navbar-nav">
<li class="active"><a href="#">START</a>
</li>
<li><a href="#">THESE</a>
</li>
<li><a href="#">ARE</a>
</li>
<li><a href="#">SOME</a>
</li>
<li><a href="#">ELEMENTS</a>
</li>
<li><a href="#">WITH</a>
</li>
<li><a href="#">DIFFERENT</a>
</li>
<li><a href="#">WIDTHS</a>
</li>
</ul>
</div>
</div>
</nav>
<div …推荐指数
解决办法
查看次数
如何使用在滚动后显示的引导程序创建隐藏的导航栏？
你能告诉我如何使用bootstrap创建一个隐藏的导航栏,并且只在你开始滚动页面后显示？
推荐指数
解决办法
查看次数
Bootstrap两个导航栏崩溃
在bootstrap中我希望在彼此之下有两个导航栏.我的想法:Navbar 1有一个品牌:主菜单.Navbar 2(navbar1下方)有一个名为:子菜单的品牌.
当用户在他的移动电话上查看该站点时,他/她看到两个可折叠的导航栏.用户现在可以选择要打开的导航栏.菜单或子菜单.
我刚刚在bootstrap网站上复制了标准代码:http://getbootstrap.com/components/#navbar
奇怪的是.当我让我的浏览器变小.出现两个折叠的导航栏."主菜单"和"子菜单".当我点击主菜单后面的按钮时,会出现主菜单.就像它应该的那样.但是当我按下子菜单(uncollapse)按钮时.MAIN-MENU再次打开.不是子菜单.
我刚刚使用了bootstrap网站上的标准导航栏代码粘贴在每个人下面的链接并更改了品牌名称.这是bootply:http://bootply.com/101690 在手机上测试它,看看导航栏中发生了什么.
推荐指数
解决办法
查看次数
ios 11透明导航栏
创建一个透明的导航栏不再适用于ios 11.我在顶部得到这个黑条,因为表格视图不再出现在条形图下面(故事板中的插图设置正确,从0开始)任何想法为什么？
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
推荐指数
解决办法
查看次数
Bootstrap导航栏对齐想要右对齐
我正在尝试将导航栏对齐到右侧.当我使用.pull-right类时,它会向右推动导航栏:"离开网格".
我究竟做错了什么？
码:
<div class="row">
<div class="span3 top_logo"><img src="images/logo_svart.png" width="177" height="60" alt="BETA Team Performance" /></div>
<div class="span9">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><strong>MENY <i class="icon-chevron-down icon-white"></i></strong>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Start</a></li>
...
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
推荐指数
解决办法
查看次数
滚动时突出显示菜单(如果到达div)
如果div滚动//或点击,我想突出显示菜单点.
http://jsfiddle.net/WeboGraph/vu6hN/2/(这就是我想要的一个例子)
我的代码:(JS)
$(document).ready(function(){
$('nav a').on('click', function(event) {
$(this).parent().find('a').removeClass('active_underlined');
$(this).addClass('active_underlined');
});
$(window).on('scroll', function() {
$('.target').each(function() {
if($(window).scrollTop() >= $(this).position().top) {
var id = $(this).attr('id');
$('nav a').removeClass('active_underlined');
$('nav a[href=#'+ id +']').addClass('active_underlined');
}
});
});
});
我的(html导航)
<nav>
<div id="cssmenu">
<ul id="horizontalmenu" class="underlinemenu">
<li><a data-scroll href="#fdesigns" class="active_underlined">FDesigns</a> </li>
<li><a data-scroll href="#skills">skills</a> </li>
<li><a data-scroll href="#workflow">WORKFLOW</a> </li>
<li><a data-scroll href="#portfolio">Portfolio</a> </li>
<li><a data-scroll href="#about">About</a> </li>
<li><a data-scroll href="#kontakt">Kontakt</a> </li>
</ul>
</div>
</nav>
我的(css)
.active_underlined a {
color: #fff;
border-bottom: 2px solid #ebebeb; …推荐指数
解决办法
查看次数
jQuery移动导航选项卡
我希望在我的jQuery Mobile项目中有一个标签导航.我知道我可以使用数据角色'navbar'但我只想更改导航栏下面的内容而不刷新到新页面.到目前为止,我只能有几个不同的页面,相同的导航栏相互链接,但这不是我想要的.
谁能帮我？
先感谢您
推荐指数
解决办法
查看次数
Twitter bootstrap + asp.net主页,如何在用户选择导航栏项时将其设置为活动状态？
我们处于相同的情况,因为问题使Twitter Bootstrap导航栏链接处于活动状态,但在我们的情况下,我们正在使用ASP.net和MasterPages ......
问题是导航栏在主页面上定义,当您单击菜单项时,您将被重定向到相应的子页面,那么如何在不重复每个子页面中的逻辑的情况下,如何更改导航栏活动项目？(最好只在主页面上没有会话变量和javascript)
推荐指数
解决办法
查看次数
使用Bootstrap使徽标图像响应
我正在使用bootstrap作为站点标题.如果我想使网站的徽标响应,我应该有两个徽标图像(一个用于桌面,一个用于移动)或者我应该调整我的图像徽标吗？获得它的最佳方法是什么？谢谢.那是我的代码:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="~/Content/images/logo.png" /></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Home</a></li>
<li><a href="~/About/Index">About</a></li>
<li><a href="~/Contact/Index">Contacts</a></li>
</ul>
</div>
</nav>
推荐指数
解决办法
查看次数