Html 中心推特引导导航项
我正在尝试将我的导航项目居中,我需要编辑什么才能这样做?我查看了bootstrap.css文件,找不到更改设置的位置。我不知道怎么做,我一直在尝试一切Html 中心推特引导导航项,html,css,twitter-bootstrap,navigation,Html,Css,Twitter Bootstrap,Navigation,我正在尝试将我的导航项目居中,我需要编辑什么才能这样做?我查看了bootstrap.css文件,找不到更改设置的位置。我不知道怎么做,我一直在尝试一切 <div id="nav" class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-colla
<div id="nav" class="navbar navbar-inverse navbar-static-top">
<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="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Play Now</a></li>
<li><a href="http://www.07-pk.com/forum/register.php">Register</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Login
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<!-- login form -->
<form action="http://www.07-pk.com/forum/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password,vb_login_md5password_utf)">
<script type="text/javascript" src="http://www.07-pk.com/forum/clientscript/vbulletin_md5.js"></script>
Username: <input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="Username" onfocus="if (this.value == 'Username') this.value = '';" />
<br />
Password: <input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" />
<input type="submit" class="button" value="Login" tabindex="4" title="" accesskey="s" />
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="forceredirect" value="1" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
<input type="hidden" name="url" value="http://www.07-pk.com" />
</form>
<!-- / login form -->
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
用户名:
密码:
Twitter引导导航项在默认情况下具有float:left
。考虑将以下样式添加到自己的CSS文件中(或者修改BooTrasp.CSS,这是我不推荐的):
用此
//你的代码在这里
布兰登·希普芬在他的博客上举了一个例子。“在Twitter引导中有导航(nav)按钮,默认情况下,它是左对齐的。我们可以用HTML div元素包装导航,并添加一些CSS。”此处使用的CSS将在bootstrap.CSS之后应用*/ 文本对齐:居中; } .中心药丸ul.导航药丸{ 显示:内联块; } 李先生{ 显示:内联; } .a{ 浮动:左; } *html.centered pills ul.nav-pills,*+html.centered pills ul.nav-pills{ 显示:内联; }
您能提供一个JSFIDLE示例吗?
.navbar .nav li {
width: 100px; /* or whatever width you want for items */
display: inline-block;
float: none;
}
.navbar .nav {
float: none;
text-align: center;
}
<div style="width:300px; margin: 0 auto;">
//your code here
</div>
/* CSS used here will be applied after bootstrap.css */
.centered-pills {
text-align: center;
}
.centered-pills ul.nav-pills {
display: inline-block;
}
.centered-pills li {
display: inline;
}
.centered-pills a {
float: left;
}
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills {
display: inline;
}
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<div class="navbar-collapse collapse">
<a class="navbar-brand pull-left" href="#">Brand</a>
<div class="centered-pills">
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<a class="navbar-brand pull-right" href="#">Brand</a>
</div>
</div>
</nav>