CSS Twitter Bootstrap：在导航栏中使用`.btn` 类的正确方法是什么？

Twitter Bootstrap: What is the correct way to use the `.btn` class within a navbar?

提问by Mario Zigliotto

I'm using a navbar for the standard nav stuff and i'd like to include a button for Sign in and Sign up.

我将导航栏用于标准导航内容，我想包含一个用于登录和注册的按钮。

The I'm using an atag with the btn btn-large btn-successclasses and by default it appears the navbar does not accommodate the use of nested btns.

我在类中使用了一个a标签，btn btn-large btn-success默认情况下，导航栏不适应嵌套btns的使用。

The result is something like this:

结果是这样的：

And when hovered over, it comes out as:

当悬停在上面时，它显示为：

My question is basically: Am i doing this wrong? Is there something I'm missing?

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

Thought i'd ask before I redefine CSS classes for .btn. within a navbar.

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

Thanks.

谢谢。

回答by Jared Harley

The navbar accommodates buttons without a problem - I have buttons in the navbar without any problems, and I was able to add them to the static navbar example on the Bootstrap page:

导航栏可以毫无问题地容纳按钮 - 我在导航栏中有按钮没有任何问题，并且我能够将它们添加到Bootstrap 页面上的静态导航栏示例中：

The html should be laid out like this:

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>

If you're not using the responsive layout to collapse the navbar on smaller screens, just put your button links one level up, in <div class="container">.

如果您不使用响应式布局在较小的屏幕上折叠导航栏，只需将您的按钮链接放在<div class="container">.

If you're still not finding the problem, try using Chrome's Dev Toolsto see what CSS is being applied to the buttons that shouldn't be.

如果您仍然没有发现问题，请尝试使用Chrome 的开发工具查看哪些 CSS 应用到了不应该应用的按钮上。

回答by Ashit Vora

As discussed here, Wrapping the link with a div works:

正如这里所讨论的，用 div 包装链接有效：

<div><a class='btn' href='#'>Link</a></div>

回答by Mario Zigliotto

Here is a modified version of Jared Harley's answer. This is what i ultimately used and it supports having a dropdown in the navbar.

这是 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>

回答by 24inwork

<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>

回答by bblokar

I had the same problem when putting the .btn in navbar, and when I hovered, it "cutted" half of button bg, I solved it that way that I declarated .nav > li > a.btn:hover again in main.css -> app's custom styles file, placed in head after bootstrap.css, that way it worked, because if you inspect element in firebug or any of dev tools and try to hover it, you'll noticed that .btn hover style is rewriten by nav hover style, which is placed after buttons in bootstrap.css file...

我在将 .btn 放在导航栏中时遇到了同样的问题，当我悬停时，它“切割”了按钮 bg 的一半，我解决了这个问题，我在 main.css 中再次声明了 .nav > li > a.btn:hover -> 应用程序的自定义样式文件，放在 bootstrap.css 之后的 head 中，这样它就起作用了，因为如果您在 firebug 或任何开发工具中检查元素并尝试将其悬停，您会注意到 .btn 悬停样式被重写导航悬停样式，放置在 bootstrap.css 文件中的按钮之后...

回答by Konrad

I've fixed this by adding this in :

我已经通过添加这个来解决这个问题：

style="margin-top:10px;"

Full button code looks like this:

完整的按钮代码如下所示：

<a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>