Question

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

我怎么能这样做？这是导航栏：

这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

nav ul
{
  margin: 0;
}

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

https://www.bootply.com/ruS4ad9IoW

Answer 2

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

Bootstrap导航栏更改高度

2 个答案: