CSS 导航栏中的 Bootstrap 3.0 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18783763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0 Button in Navbar
提问by Cihan Küsmez
I upgraded bootstrap 3.0 now. And "a" tag which looks like btn (by the help of class .btn) is ruined on navbar.
我现在升级了引导程序 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>
But it is not working correctly. Bootstrap changed the system i think.
但它不能正常工作。Bootstrap 改变了我认为的系统。
回答by Lachlan Arthur
Wrap a <p class="navbar-btn">around the <a class="btn">:
裹<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/
JSFiddle：http: //jsfiddle.net/lachlan/398kj/
Screenshot:
截屏：
回答by Albzi
Now, bootstrap 3 has buttons in the navbar like this:
现在，bootstrap 3 在导航栏中有这样的按钮：
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
It uses navbar-btnso it knows it's in the navbar.
它使用navbar-btn所以它知道它在导航栏中。
If you want it to work, do this:
如果您希望它工作，请执行以下操作：
<li>
<form action="#">
<button class="btn btn-default navbar-btn">Link</button>
</form>
</li>
This way, it still acts like an anchor tag. Just change #for the value you actually want it to go to.
这样，它仍然像一个锚标签。只需更改#您实际希望它达到的值即可。
So for this instance:
所以对于这个例子：
<li>
<form action="<?php echo BASE_PATH; ?>register.php">
<button class="btn btn-default navbar-btn">Link</button>
</form>
</li>
回答by megar
With bootstrap 3, it is still possible to have a <a>link rendered as a button, but you have to include them into a <form>. Also, the <a>should include the navbar-btnclass.
使用 bootstrap 3，仍然可以将<a>链接呈现为按钮，但您必须将它们包含在<form>. 此外，<a>应该包括navbar-btn类。
<li>
<form>
<a href="#" class="btn btn-primary btn-sm navbar-btn">
register
</a>
</form>
</li>
回答by Intellix
The problem is that the selector for styling an anchor in a navbar is: .nav > li > awhich means it has a higher precedence than a .navbar-btn.
问题在于导航.nav > li > a栏中锚定样式的选择器是：这意味着它比 .navbar-btn 具有更高的优先级。
You can fix by just wrapping it in another tag like a span. I don't think you should use a form tag as others suggest as it's not a form at all.
您可以通过将其包装在另一个标签（如跨度）中来修复。我认为您不应该像其他人建议的那样使用表单标签，因为它根本不是表单。
回答by victorhazbun
http://learnangular2.com/events/
http://learnangular2.com/events/
EVENT OBJECT
事件对象
To capture the event object, pass $event as a parameter in the event callback from the template:
要捕获事件对象，请在模板的事件回调中将 $event 作为参数传递：
<button (click)="clicked($event)"></button>
This is an easy way to modify the event, such as calling preventDefault:
这是修改事件的简单方法，例如调用 preventDefault：
@Component(...)
class MyComponent {
clicked(event) {
event.preventDefault();
}
}
