标签: navbar
在Twitter Bootstrap中更改导航栏颜色
我将如何修改CSS以更改Twitter Bootstrap中导航栏的颜色？
css navbar twitter-bootstrap twitter-bootstrap-3 bootstrap-4
推荐指数
解决办法
查看次数
带徽标的Bootstrap 3 Navbar
我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏.在不引起不同屏幕尺寸问题的情况下,这样做的正确方法是什么？我认为这是一个常见的要求,但我还没有看到一个好的代码示例.除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性.
我试过把一个IMG标签放在带有navbar-brand类的A标签内,但这导致菜单在我的Android手机上无法正常运行.我也试过增加导航栏类的高度,但这更加困难了.
顺便说一句,我的徽标图像大于导航栏的高度.
推荐指数
解决办法
查看次数
带有左,中或右对齐项目的Bootstrap NavBar
在引导,什么是最平台友好的方式来创建一个导航栏,有徽标中的左边,在中心菜单项和标志B上的吧？
这是我到目前为止已经试过,它最终被对齐,使标志A是在左边,菜单项旁边的右边的左边和标志B中的标志.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
推荐指数
解决办法
查看次数
如何使用Angular JS设置bootstrap navbar活动类？
如果我在引导程序中有一个带有项目的导航栏
Home | About | Contact
如何为每个菜单项激活时设置活动类？也就是说,如何设置class="active"角度路径的时间
#/为了家#/about对于关于页面#/contact对于联系页面
javascript navbar twitter-bootstrap angularjs angularjs-directive
推荐指数
解决办法
查看次数
Bootstrap 4将导航栏项目对齐到右侧
如何将导航栏项目对齐？
我想登录并注册到右边.但我尝试的一切似乎都不起作用.
这是我到目前为止所尝试的:
<div>围绕<ul>着属性:style="float: right"<div>围绕<ul>着属性:style="text-align: right"- 在
<li>标签上尝试了这两件事 !important添加到最后再尝试所有这些东西- 改变
nav-item以nav-right在<li> - 添加了一个
pull-sm-right类<li> - 添加了一个
align-content-end类<li>
这是我的代码:
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" …推荐指数
解决办法
查看次数
响应式引导程序导航栏中的中心内容
我无法将我的内容集中在引导程序导航栏中.我正在使用bootstrap 3.我读了很多帖子,但是使用的CSS或方法不能用于我的代码!我真的很沮丧,所以这就像我的最后一个选择.任何帮助,将不胜感激!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li> …推荐指数
解决办法
查看次数
Bootstrap 3 Navbar Collapse
有没有办法增加bootstrap 3导航栏崩溃的点(即,它会折叠成纵向平板电脑上的下拉列表)？
这两个适用于bootstrap 2但现在不适用!
推荐指数
解决办法
查看次数
不使用LESS更改引导程序导航栏折叠断点
目前,当浏览器宽度降至768px以下时,导航栏将更改为折叠模式.我想将此宽度更改为1000px,因此当浏览器低于1000px时,导航栏将更改为折叠模式.我想在不使用LESS的情况下这样做,我使用手写笔不是很少.
我的问题与此问题相同:Bootstrap 3 Navbar Collapse
但是这些问题的所有答案都解释了如何通过改变LESS变量来做到这一点.我没有处理过LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成.
谢谢!
推荐指数
解决办法
查看次数
Twitter Bootstrap中的导航栏颜色
如何更改Twitter Bootstrap 2.0.2导航栏的背景颜色？如何更改导航栏中所有元素的颜色以反映背景颜色？
推荐指数
解决办法
查看次数
如何在twitter的bootstrap 2.1.0中使用新的词缀插件？
关于该主题的bootstrap文档对我来说有点混乱.我希望实现类似于使用词缀导航栏的文档中的行为:导航栏位于段落/页面标题下方,向下滚动时,应首先滚动直到到达页面顶部,然后将其固定以进一步滚动向下.
由于jsFiddle无法使用导航栏概念,因此我设置了一个单独的页面作为最小示例:http://i08fs1.ira.uka.de/~s_drr/navbar.html
我用它作为我的导航栏:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
我认为我希望data-offset-top价值0(因为酒吧应该"坚持"到最顶层"但是50,至少有一些效果可观察.
如果还放置了javascript代码:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
任何帮助赞赏.
推荐指数
解决办法
查看次数