html - Bootstrap 导航栏更改高度

Question

我不知道为什么，我的导航栏没有居中。我的按钮没有居中对齐，我想更改导航栏高度。

我怎么做到的？这是导航栏:

这是代码:

.extra-margin {
   margin-bottom: 1%;
}
.extra-padding{
   padding-top: 1%;
}
.extra-button{
   margin-left: 5%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
       <nav class="navbar navbar-dark bg-dark navbar-fixed-top extra-margin">
          <ul>
             <a class="btn btn-outline-primary" href="{% url 'interface:users' %}">Lista Pacientes</a>
             <a class=" btn btn-outline-success" href="{% url 'interface:users' %}">Añadir Paciente</a>
             <a class=" btn btn-outline-danger" href="{% url 'interface:users' %}">Eliminar Paciente</a>
          </ul>
    
          <form class="navbar-form navbar navbar-right extra-padding" action="{% url 'interface:users' %}" method="post">
             {% csrf_token %}
             <div class="input-group">
                <input type="text" name="search_text" class="form-control" placeholder="ID del Paciente">
                <div class="input-group-btn">
                   <button class="btn btn-outline-warning extra-button" type="submit">  Buscar Paciente
                   </button>
                </div>
             </div>
          </form>
       </nav>
    </header>

Answer 1

要将按钮置于内联状态，请使用以下样式更改:

nav ul
{
  margin: 0;
}

默认情况下，ul 有一些底边距。

https://www.bootply.com/ruS4ad9IoW