css - 推特 Bootstrap : What is the correct way to use the `.btn` class within a navbar?

标签 css navigation twitter-bootstrap css-frameworks

我正在为标准导航内容使用导航栏,我想包含一个用于登录和注册的按钮。

我将 a 标签与 btn btn-large btn-success 类一起使用,默认情况下,导航栏似乎不支持嵌套 btns.

结果是这样的:

default without hover

当悬停在上面时,它会显示为:

hovered

我的问题基本上是:我做错了吗?有什么我想念的吗?

我想在为 .btn 重新定义 CSS 类之前先问一下。在导航栏中。

谢谢。

最佳答案

导航栏容纳按钮没有问题 - 我在导航栏中有按钮没有任何问题,我能够将它们添加到 static navbar example on the Bootstrap page :

Buttons added to the navbar.

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's Dev Tools查看哪些 CSS 应用于不应该应用于的按钮。

关于css - 推特 Bootstrap : What is the correct way to use the `.btn` class within a navbar?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9252712/

相关文章:

html - 使用 CSS 从右到左 div 并在 5 秒后隐藏

html - CSS text.overflow 与 @Html.LabelFor

ruby-on-rails - 回滚 rake Assets :precompile

html - 我如何在这个表单旁边保留一个 h1 标签和一个 p 标签? ( Bootstrap )

android - 当参数具有默认值时,为什么我不能使用导航组件将参数传递给 fragment ?

javascript - Ondrag ROT-13/ROT-47解码

html - 绝对定位的嵌套元素上的 z-index

php - Bootstrap 多级下拉不起作用

css - 没有包装器的 2 个单独菜单元素上的同时 CSS 悬停效果?

css - 如何使这个没有宽度的 <nav> 元素导航栏居中