Twitter Bootstrap：在导航栏中使用`.btn`类的正确方法是什么？
我正在使用一个导航栏的标准导航的东西，我想包括login和注册button。
我正在使用btn btn-large btn-success类a标签，默认情况下，navbar不支持使用嵌套的btn 。
结果是这样的：
当它盘旋时，它performance为：
我的问题基本上是：我做错了吗？ 有什么我失踪？
以为在我为.btn重新定义CSS类之前，我会问。 在一个导航栏内。
谢谢。
导航栏容纳button没有问题 – 我在导航栏中没有任何问题的button，我可以将它们添加到Bootstrap页面上的静态导航栏示例 ：
html应该像这样布置：
<div class="navbar navbar-fixed-top active"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project name</a> <div class="nav-collapse"> <ul class="nav"> ... nav links ... </ul> <form class="navbar-search pull-left" action=""> ... search box stuff </form> <a class="btn btn-success">Sign in</a> <a class="btn btn-primary">Sign up</a> </div> </div> </div> </div>
如果您没有使用响应式布局在较小的屏幕上折叠导航栏，只需将您的button链接放在一个层级<div class="container"> 。
如果您仍然没有发现问题，请尝试使用Chrome的开发工具来查看哪些CSS不适用于button。
正如这里所讨论的，用div封装链接的工作：
<div><a class='btn' href='#'>Link</a></div>
这是Jared Harley的答案的修改版本。 这是我最终使用，它支持在导航栏中的下拉菜单。
<div class="navbar navbar-fixed-top active"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project name</a> <div class="nav-collapse"> <ul class="nav"> ... nav links ... </ul> <form class="navbar-search pull-left" action=""> ... search box stuff </form> <a class="btn btn-success">Sign in</a> <a class="btn btn-primary">Sign up</a> </div> <div class="pull-right"> <ul class="nav"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="#">item</a> </li> <li class="divider"></li> <li> <a href="#">another item</a> </li> </ul> </li> <li class="divider-vertical"></li> </ul> <a class="btn btn-primary" href="#">Primary</a> <a class="btn btn-success" href="#">Success</a> </div> </div> </div> </div>
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Brand name</a> <ul class="nav"> <li class="active"><a href="#">Main</a></li> <li><a href="#about">Next one</a></li> </ul> <div class="btn-group pull-right"> <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div>
在导航栏中放置.btn时遇到同样的问题，当我徘徊的时候，它会“切断”buttonbg的一半，我解决了这个问题，我已经声明了.nav> li> a.btn：再次在main.css中hover – >应用程序的自定义样式文件，在bootstrap.css之后放在头部，这样就可以工作，因为如果您检查萤火虫或任何开发工具中的元素并尝试将其hover，则会注意到.btnhover样式被重写导航hover的风格，这是放在button之后bootstrap.css文件…
我已经解决了这个问题：
style="margin-top:10px;"
完整的button代码如下所示：
<a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>
