Bootstrap 5导航栏fa-address-card图标无法与其他按钮垂直对齐

问题 #

在使用Bootstrap 5.0.2和jQuery 3.7.0开发的导航栏中，带有fa fa-address-card类的下拉菜单按钮无法与相邻的fa fa-heart、fa fa-shopping-cart按钮垂直对齐，位置偏上。如何让该按钮与另外两个按钮保持一致的对齐效果？

HTML代码 #

<nav class = "navbar navbar-expand-lg navbar-light bg-white py-4 ">
      <div class = "container barra_navegacao">
          <a class = "navbar-brand d-flex justify-content-between align-items-center order-lg-0" href = "{% url 'home' %}">
              <img src = "{% static 'base\img\shopping-bag-icon.png' %}" alt = "site icon">
              <span class = "text-uppercase fw-lighter ms-2">Pytudo</span>
          </a>

        <div class="search-form d-flex justify-content-center align-items-center flex-grow-1">
            <form class="d-flex" action="{% url 'listar_produtos' %}" method="GET">
                <input type="text" class="form-control me-2" name="nome" placeholder="O que você procura?">
            </form>

            <div class="dropdown">
                <a class="nav-link text-uppercase text-dark dropdown-toggle" href="#" role="button" id="categoriasDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Categorias
                </a>
                <ul class="dropdown-menu" aria-labelledby="categoriasDropdown">
                    {% for categoria in categorias %}
                        <li><a class="dropdown-item" href="#">{{ categoria }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class = "order-lg-2 nav-btns">

            <div class="dropdown">
                <button type="button" class="btn position-relative dropdown-toggle" id="PainelDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-address-card" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="PainelDropdown">
                    {% if request.user.is_authenticated %}
                        <li><a href="{% url 'account_logout' %}">Deslogar</a></li>
                    {% else %}
                        <li><a href="{% url 'account_login' %}">Entrar</a></li>
                    {% endif %}
                    <li><a href="{% url 'painel_controle' %}">Painel de controle</a></li>
                </ul>
            </div>

            <button type = "button" class = "btn position-relative">
                <a href ="{% url 'ver_lista_desejo' %}"><i class = "fa fa-heart"></i><a/>
                <span class = "position-absolute top-0 start-100 translate-middle badge bg-primary">2</span>
            </button>
            <button type = "button" class = "btn position-relative">
                <a href ="{% url 'carrinho' %}"><i class = "fa fa-shopping-cart"></i><a/>
                <span class = "position-absolute top-0 start-100 translate-middle badge bg-primary">5</span>
            </button>
        </div>
      </div>
  </nav>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@400;500;700&family=Poppins:wght@300;400;500&display=swap');

:root{
    --lg-font: 'Kaisei Tokumin', serif;
    --sm-font: 'Poppins', sans-serif;
    --pink: #e5345b;
}
body{
    font-family: var(--sm-font);
    background-color: #ecedee;
}

/* button */
.bg-primary{
    background-color: var(--pink)!important;
}

.btn a {
    text-decoration: none; 
    color: #000;
}

.btn:hover {
    background-color: #e5345b; 
}

.btn:not(.nav-btns button){
    background-color: #fff;
    color: rgb(85, 85, 85);
    padding: 10px 28px;
    border-radius: 25px;
    border: 1px solid rgb(85, 85, 85);
}
.btn:not(.nav-btns button):hover{
    background-color: var(--pink);
    color: #fff;
    border-color: var(--pink);
}

/* text color */
.text-primary{
    color: var(--pink)!important;
}

/* navbar */
.navbar{
    -webkit-box-shadow: 0 3px 9px 3px rgba(0, 0, 0, 0.1);
            box-shadow: 0 3px 9px 3px rgba(0, 0, 0, 0.1);
}
.navbar-brand img{
    width: 30px;
}
.navbar-brand span{
    letter-spacing: 2px;
    font-family: var(--lg-font);
}
.nav-link:hover{
    color: var(--pink)!important;
}
.nav-item{
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

.search-form {
    flex: 1; /* Ocupa todo o espaço disponível na navbar */
}

.search-form form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-form input[type="text"] {
    max-width: 300px; /* Define uma largura máxima para a barra de pesquisa */
}

.search-form button {
    margin-left: 10px; /* Espaçamento entre a barra de pesquisa e o botão Pesquisar */
}

.barra_navegacao{
    margin: 0px 20px;
    padding: 0px 12px;
}

/* footer */
footer .brand{
    font-family: var(--lg-font);
    letter-spacing: 2px;
}
footer a{
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
footer a:hover{
    color: var(--pink)!important;
}

/* media queries */
@media(min-width: 992px){
    .nav-item{
        border-bottom: none;
    }
}

解决方案 #

问题核心是nav-btns容器未设置统一的垂直对齐规则，且下拉按钮的外层容器与其他按钮布局不一致，可通过以下两步解决：

1. 给nav-btns容器添加Flex布局类，统一内部元素对齐方式
   修改HTML中nav-btns的div标签：

<div class="order-lg-2 nav-btns d-flex align-items-center gap-3">

d-flex将容器转为Flex布局，align-items-center实现内部元素垂直居中，gap-3给按钮间添加均匀间距，替代默认margin。

2. 统一nav-btns内按钮的基础样式
   在CSS中添加如下规则，确保所有按钮高度一致：

.nav-btns .btn {
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

该规则给导航栏按钮设置统一内边距和对齐方式，消除因样式差异导致的高度偏差。

完成以上调整后，三个按钮即可保持垂直对齐效果。

内容的提问来源于stack exchange，提问作者Marcos Facini