导航栏中的Bootstrap 3.0按钮

Question

我现在升级了Bootstrap 3.0。然而，使用类 .btn 变成按钮样式（button）的 "a" 标签在导航栏里出了问题。

<li>
   <a href="<?php echo BASE_PATH; ?>register.php" class="btn btn-primary btn-sm">
       <?php echo "<strong>" . _('Bayilik Başvurusu') . "</strong>"; ?>
   </a>
</li>

但它没有正常工作。我认为 Bootstrap 更改了系统。

- Cihan Küsmez

---

你真的应该查看文档中的Bootstrap 2到3迁移部分。它列出了所有已更改或删除的类以及替代它们的内容。http://getbootstrap.com/getting-started/#migration - cjd82187

Answer 1

在 <a class="btn"> 周围包裹一个 <p class="navbar-btn">：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle：http://jsfiddle.net/lachlan/398kj/

屏幕截图：

- Lachlan Arthur

---

谢谢，很好用，我喜欢你的解决方案，因为你仍然可以使用<a>。 - pastullo

请注意：折叠版本的外观不太好。其他链接是块状的（即全宽可点击）。如果您使用 btn-block，它会使文本居中对齐，因此与其他链接不匹配。 - rybo111

Answer 2

现在，Bootstrap 3 在导航栏中有如下的按钮:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

使用 navbar-btn 使其知道它在导航栏中。

如果您想要它起作用，请执行以下操作：

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

这样，它仍然像一个锚标签一样起作用。只需将 # 改为您实际想要转到的值即可。

所以对于这个示例：

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

- Albzi

---

关于什么？<a type="button" class="btn btn-default navbar-btn">链接</a> 在我们能够做到这一点之前。 - Cihan Küsmez

不幸的是，如果它指向的路径是/app，则结果URL为/app?（请注意多余的问号）。 - hakunin

Answer 3

使用 Bootstrap 3 仍然可以将 <a> 链接渲染为按钮，但必须将它们包含在 <form> 中。此外，<a> 应包括 navbar-btn 类。

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>

- megar

---

谢谢提示。事实上，我发现<div>也可以使用，而不是语义上不太正确的<form>。关键在于不要将<a>直接作为<li>的子元素。 - Billy Chan

当你这样做时，悬停是否出现问题？对我来说，按钮的背景变成了透明。 - RichC

<div>解决方案对我很有效。然而，遗憾的是这在框架中没有本地支持。我也看到了很多关于此的Github讨论，但我认为他们没有计划使链接按钮在本地工作，这对我来说似乎是一个糟糕的选择。 - SirRawlins

Answer 4

问题在于导航栏中用于样式化锚点的选择器是：.nav > li > a，这意味着它比一个.navbar-btn具有更高的优先级。

你可以通过将其包装在另一个标签中（如）来解决问题。我认为不应像其他人建议的那样使用表单标签，因为它根本不是表单。

- Intellix

---

绝对是最佳答案。 - typeoneerror

Answer 5

http://learnangular2.com/events/

事件对象

为了捕获事件对象，从模板中将$event作为参数传递到事件回调函数中：

<button (click)="clicked($event)"></button>

这是一种简单的修改事件的方法，比如调用preventDefault：

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

- victorhazbun

---

这个...嗯。什么？ - Adowrath