css - 导航栏中的 Bootstrap 3.0 按钮

Question

我现在升级了 bootstrap 3.0。并且看起来像 btn 的“a”标签（在 .btn 类的帮助下）在导航栏上被破坏了。

<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 改变了系统。

Answer 1

环绕a <p class="navbar-btn">：<a class="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/

截屏：

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>

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>

Answer 4

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

您可以通过将其包装在另一个标签（如跨度）中来修复。我认为您不应该像其他人建议的那样使用表单标签，因为它根本不是表单。

Answer 5

http://learnangular2.com/events/

事件对象

要捕获事件对象，请在模板的事件回调中将 $event 作为参数传递：

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

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

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