html - Bootstrap 3 按钮呈现不良 CSS 且未对齐

Question

这是我的 jsFiddle (您必须展开结果 Pane 才能看到它的全部荣耀)。

注意绿色注册按钮的样子:

• 固定到导航栏顶部；和
• 看起来不像普通的“成功”按钮 ( example here )

我无法判断这是因为我正在使用 CDN(也许 CDN 已过时)，还是因为我在以下代码中缺少一些 CSS 规则而发生了这两件事:

<ul class="nav navbar-nav navbar-right">
    <li class="active"><button type="button" class="button btn-success">Sign up</button></li>
    <li class="active"><button type="button" class="button btn-link">Sign in</button></li>
</ul>

有什么想法我会出错吗？

Answer 1

首先，您需要在按钮上使用 btn 类而不是 button 类，然后您需要将按钮包装在导航栏表单父级中以定位它们正确地像这样:

<form class="navbar-form navbar-right">
    <div class="form-group">
        <button type="button" class="btn btn-success">Sign up</button>
        <button type="button" class="btn btn-link">Sign in</button>
    </div>
</form>

https://jsfiddle.net/71j5psr0/6/

您可能应该将按钮更改为链接，只需记住在导航栏中，默认情况下列表项内的链接将占据导航栏本身的整个高度，并将继承独特的样式。您可以将相同的 btn-* 类应用于链接，它们的显示方式与按钮完全相同。