Navbar中的Bootstrap 3.0按钮

Cih*_*mez 79 css twitter-bootstrap-3

我现在升级了bootstrap 3.0.并且"a"标签看起来像btn(在类.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>
Run Code Online (Sandbox Code Playgroud)

但它无法正常工作.我认为Bootstrap改变了系统.

Lac*_*hur 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>
Run Code Online (Sandbox Code Playgroud)

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

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

  • 请注意:折叠版本看起来不太好.其他链接是块(即全宽可点击).如果使用`btn-block`,它会集中对齐文本,因此它与其他链接不匹配. (6认同)

Alb*_*bzi 46

现在,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>
Run Code Online (Sandbox Code Playgroud)

这样,它仍然像锚标签一样.只需改变#你真正希望它去的价值.

所以对于这个例子:

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>
Run Code Online (Sandbox Code Playgroud)

  • 不幸的是,这种方式,如果它指向的路径是`/ app`,结果url是`/ app?`(注意额外的问号). (2认同)

小智 24

使用bootstrap 3,仍然可以将<a>链接呈现为按钮,但您必须将它们包含在一个按钮中<form>.此外,<a>应该包括navbar-btn班级.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>
Run Code Online (Sandbox Code Playgroud)

  • 谢谢你的提示.实际上我发现`<div>`也适用,而不是`<form>`,它不是语义的.关键是不要让`a`成为`<li>`的直接孩子. (15认同)

Int*_*lix 21

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

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

  • 绝对是最好的答案. (2认同)