导航栏中的Bootstrap 3.0按钮


79

我现在升级了bootstrap 3.0。看起来像btn的“ a”标记(在类.btn的帮助下)在navbar上损坏了。

<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改变了我认为的系统。


您确实应该看一下文档的Bootstrap 2到3迁移部分。它列出了所有已更改或删除的类以及在其位置使用的内容。 getbootstrap.com/getting-started/#migration
cjd82187 2013年

Answers:


176

将换<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/

屏幕截图:
导航栏中的Bootstrap链接按钮


1
谢谢,效果很好,我更喜欢您的解决方案,因为您仍然可以使用<a>
pastullo 2014年

6
请注意:折叠后的版本看起来不太好。其他链接是块(即,可单击全角)。如果使用btn-block它,则将文本居中对齐,因此它与其他链接不匹配。
rybo111

46

现在,引导程序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>

1
关于什么 ?<a type="button" class="btn btn-default navbar-btn">链接</a>。
CihanKüsmez13年

2
不幸的是,如果它指向的路径是/app结果URL ,则这种方式是/app?(请注意额外的问号)。
hakunin '16

24

使用bootstrap 3,仍然可以将<a>链接呈现为按钮,但是您必须将它们包含在中<form>。另外,该类<a>应包括在内navbar-btn

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

15
感谢您的提示。实际上,我也发现了<div>作品,而<form>不是语义。关键不是要让a成为的直接子代<li>
比利·陈

1
但是,执行此操作时,鼠标悬停了吗?按钮的背景对我来说是透明的。
RichC 2014年

1
<div>解决方案对我有用。可惜的是,虽然框架本身支持该功能,但是我也看到了很多有关Github的讨论,并且不认为他们有任何使链接按钮在本机工作的计划,在我看来,这是一个糟糕的选择。
SirRawlins 2014年

21

问题在于,用于在导航.nav > li > a栏中设置锚样式的选择器为:这意味着其优先级高于.navbar-btn。

您可以通过将其包装在另一个标签(例如跨度)中来进行修复。我认为您不应该像其他人一样使用表单标签,因为它根本不是表单。


2
绝对是最佳答案。
typeoneerror 2014年

0

http://learnangular2.com/events/

活动对象

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

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

这是修改事件的简便方法,例如调用preventDefault:

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

这个...嗯 什么?
Adowrath
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.