我将导航栏用于标准导航内容,并且我想包含一个用于登录和注册的按钮。
我正在使用a
带有类的标签,btn btn-large btn-success
默认情况下,导航栏似乎不适合使用嵌套btn
的 s。
结果是这样的:
当悬停在上面时,它会显示为:
我的问题基本上是:我做错了吗?有什么我想念的吗?
在我为 .btn 重新定义 CSS 类之前,我想我会问。在导航栏中。
谢谢。
我将导航栏用于标准导航内容,并且我想包含一个用于登录和注册的按钮。
我正在使用a
带有类的标签,btn btn-large btn-success
默认情况下,导航栏似乎不适合使用嵌套btn
的 s。
结果是这样的:
当悬停在上面时,它会显示为:
我的问题基本上是:我做错了吗?有什么我想念的吗?
在我为 .btn 重新定义 CSS 类之前,我想我会问。在导航栏中。
谢谢。
导航栏可以毫无问题地容纳按钮 - 我在导航栏中有按钮没有任何问题,并且我能够将它们添加到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>
如果您不使用响应式布局来折叠较小屏幕上的导航栏,只需将按钮链接向上一层,在<div class="container">
.
如果您仍然没有发现问题,请尝试使用Chrome 的开发工具来查看哪些 CSS 应用到了不应该应用的按钮上。
如此处所讨论的,用 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 放在导航栏中时我遇到了同样的问题,当我悬停时,它“剪切”了按钮 bg 的一半,我通过在 main.css 中再次声明 .nav > li > a.btn:hover 来解决它-> 应用程序的自定义样式文件,放在 bootstrap.css 之后的 head 中,这样就可以工作,因为如果您在 firebug 或任何开发工具中检查元素并尝试将其悬停,您会注意到 .btn 悬停样式被重写导航悬停样式,放置在 bootstrap.css 文件中的按钮之后...
我已经通过添加这个来解决这个问题:
style="margin-top:10px;"
完整的按钮代码如下所示:
<a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>