我试图减少bootstrap 3.0导航栏高度,它与固定的顶级行为一起使用.我在这里使用代码.
HTML
<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
<div class="navbar-inner-sm">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pull-right">
<li class="active">
<a href="../getting-started">Getting started</a>
</li>
<li>
<a href="../css">Ext01</a>
</li>
<li>
<a href="../components">Language</a>
</li>
<li>
<a href="../javascript">My Account</a>
</li>
<li>
<a href="../customize">Sign Out</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
CSS
.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: …这是我简单的导航栏:
<div class="navbar navbar-fixed-top myfont" role="navigation">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png"/>
</a>
</li>
<li>
<button class="btn btn-navbar">
<i class="fa fa-edit"></i>
Create
</button>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li data-match-route="/"><a href="#/page-one">Login</a></li>
<li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
</ul>
</div>
我只是想防止这种崩溃,因为我不需要它,该怎么办？
我想避免编写300K行的CSS来覆盖默认样式.
有什么建议吗？
有人可以建议我如何在导航栏顶部放置徽标图像吗？我的加价:
<body>
<a href="index.html"> <img src="images/57x57x300.jpg"></a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
由于57x57x300.jpg显示在导航栏下方,因此无法正常工作.
我想知道如何在导航栏中将鼠标悬停在链接上时更改链接的颜色,因为目前它们是一种难看的颜色.
谢谢你的建议？
HTML:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>
</div>
</div>
我刚刚完成了home/index.html页面.将导航栏保持在原位,并在用户点击我的所有页面时保持导航栏.我是否必须将导航代码复制并粘贴到每个页面的顶部？或者还有另一种方法可以看起来更干净吗？
HMTL导航:
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
我试图navbar在Bootstrap 3中证明(使导航栏内容延伸).我已经添加margin: 0 auto; max-width: 1000px;到nav*类中,并且还尝试将container元素作为父元素添加到ul.作为最后一次检查,我通过添加到课程中完成了本答案中建议navbar-justified的内容navbar,但是这导致一切都在左边拼凑而不是整个导航栏的合理性.
做一个nav nav-justified ul确实成为ul中心,但它不保留navbar-nav类的样式,因为它不是它的一部分ul,并且当屏幕小于768px时它看起来不太好.
我如何证明Bootstrap 3的合理性navbar？
编辑:对于那些对更完整的答案感兴趣的人,这里是我在制作中使用的一些代码:
// Stylesheet
.navbar-nav>li {
float: none;
}
// Navbar
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="group.html">Group</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="positions.html">Positions</a></li>
</ul>
</nav>
而这里是一个工作的jsfiddle.您可能需要拉伸result框的大小才能正确显示.如果你对实际列表居中感兴趣而没有导航拉伸到全宽,请参阅David Taiaroa的jsFiddle.
我想以早于768px的分辨率折叠我的导航栏,例如992px,我该怎么做？谢谢!(我知道我可以在引导页面上自定义它,但我不想用新的bootstrap.css文件重新启动我的项目)
无论我尝试什么,我都无法在Bootstrap导航栏中找到一些东西,任何解决方案呢？
我已经尝试添加div,使用margin:0 auto;或margin-right:auto; margin-left:auto;使用center-block类.没有什么可行的,为什么很难实现这么简单我无法理解的东西,我做错了什么？
这是当前的代码:
<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav text-center">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
我希望能够将导航停在页面的中间位置并使其保持在不同分辨率的中心位置.我不想使用偏移来推动它或边缘左边,因为这会在不同的浏览器宽度中将其搞砸.这是我正在搞乱的典型酒吧但是ul总是在左边对齐.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Menu</a></li>
<li><a href="#">On Tap</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Surfwear</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container -->
</div><!-- navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
如何在导航栏上的每个链接之间创建更大的空间,以便它们相距更远？这是我改变CSS还是HTML的东西？以下是我在html中实现导航栏的方法:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-static-top" role="navigation">
<div class="container full-width">
<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="navbar-brand" href="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home_page">Home</a></li>
<li><a href="#about_page">About</a></li>
<li><a href="#portfolio_page">Portfolio</a></li>
<li><a href="#contact_page">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>