html - Bootstrap 按钮大小而不改变导航栏的大小

Question

我想把登录按钮放在导航栏上，但是一旦我把它放在导航栏上，导航栏的大小就会增加。如何防止导航栏改变大小和改变按钮的大小？

<div class="navbar-primary">
  <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
<ul class="nav navbar-nav navbar-right">

        <li><a href="/accounts/signin/">login</a></li>
        </ul>

在这里我想用 Bootstrap 按钮替换登录这个词，我试过把<button class="btn btn-primary" type="submit">Sign in</button> 里面但是导航栏的大小因为按钮的大小而改变

编辑:

register

> login

Answer 1

好的，这是一个简单的解决方案，只需添加这个选择器和样式

.btn-sm {
padding-top: 0px;
padding-bottom: 0px;
}

这是一个代码笔的链接，除了我提供的样式外，还有准确的代码

Example

您可以添加和删除样式以查看差异。

如果您希望导航栏更大一点，只需相应地添加 padding-top 和 padding-bottom。