自定义引导程序头 [英] Customizing bootstrap header
问题描述
我编写了一个自定义引导程序标头，如屏幕截图所示:
我希望该导航栏向右移动，以便它可以满足这样的要求.
我将外部 CDN 用于引导程序和 jquery.
这是我的代码:
<头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>注册</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><link rel="stylesheet" type="text/css" href="css/styles.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><身体><身体><nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a><!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="navbarCollapse"><ul class="nav navbar-nav"><li class="active"><a href="#" target="_blank">首页</a></li><li><a href="#" target="_blank">关于</a></li><li><a href="#" target="_blank">联系方式</a></li>
</nav></html>
CSS:
.navbar-fixed-top {最小高度:80px；}.navbar-fixed-top .navbar-collapse {最大高度:136px；}.navbar-collapse {保证金最高:1%；}.导航栏{背景图像:无；}@media(最小宽度:768px){.navbar-fixed-top .navbar-collapse {最大高度:50px；}}#myNavbar {背景色:#0067ac;颜色:#16ac07；边界半径:0;}提琴手:
https://jsfiddle.net/z4b2bwg6/9/
我该怎么做?
只需添加类 .navbar-right 即可使菜单项向右浮动 - http://getbootstrap.com/components/#navbar-component-alignment
I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" target="_blank">Home</a></li>
<li><a href="#" target="_blank">About</a></li>
<li><a href="#" target="_blank">Contact</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
@media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?
Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#" target="_blank">Home</a></li>
<li><a href="#" target="_blank">About</a></li>
<li><a href="#" target="_blank">Contact</a></li>
</ul>
</div>
这篇关于自定义引导程序头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
