Bootstrap5环境下实现logo与文字间无缝分隔细线的咨询

实现方案 #

你可以直接用Bootstrap 5自带的工具类实现，不需要额外编写自定义CSS，步骤如下：

• 移除navbar-brand的默认下边距，给该元素加mb-0类
• 给logo图片元素添加底部边框，同时移除图片的默认下内边距，保证边框和logo底部无间距
• 给下方的<h2>标签添加上边距清零类mt-0，保证边框和下方文字无间距

修改后的完整代码如下：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand mb-0">
        <!-- 可根据需求修改边框颜色、粗细，默认border-1就是1px细线 -->
        <img src="images/logo.png" alt="品牌logo" class="border-bottom border-dark pb-0">
      </a>
      <h2 class="mt-0 font-size-medium">Zombie Testing</h2>
    </div>
  </div>
</nav>

如果需要细线宽度撑满父容器而非和logo同宽，把底部边框加在navbar-brand外层的div上，同步调整对应边距即可。

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