Bootstrap 导航栏更改高度答案

【问题标题】：Bootstrap navbar change heightBootstrap 导航栏更改高度
【发布时间】：2018-04-05 01:54:05
【问题描述】：

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

我怎么能做到这一点？这是导航栏：

这是代码：

.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>

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

要将按钮内联，请使用以下样式更改：

nav ul
{
  margin: 0;
}

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

https://www.bootply.com/ruS4ad9IoW

【讨论】：

【解决方案2】：

您必须在 CSS 中使用 @navbar-height 更改此设置。创建导航栏时至少有 50 像素。现在关于垂直居中，您可以使用vertical-align: middle; 并将 ul 元素中的边距更改为 0，通常 ul 有边距

【讨论】：