Bootstrap 5导航栏flex-direction:column布局时消除间距及宽度适配问题

问题描述 #

基于Bootstrap 5官网基础导航栏示例，设置flex-direction:column实现Logo在菜单项上方的布局，但存在两个问题：

• Logo与菜单项之间有空白间距
• 菜单项宽度无法与Logo完全匹配

原始可复现代码：

CSS代码

#mynavbar{
  border: 2px solid black;
}

#mynavbarinside{
  border: 2px solid black;
}

HTML代码

<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
<body>
<nav id="mynavbar" class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid" style="flex-direction: column;">
                    <div class="navbar-brand">
                        <img src="https://shapedplugin.com/wp-content/uploads/2023/04/Create-a-full-width-ticker-logo-carousel.png" class="img-fluid">
                    </div>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div id="mynavbarinside" class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul id="site_nav" class="navbar-nav mx-auto">
                            <li class="nav-item" style="width: 20%">
                                <a class="nav-link" href="http://link01" target="_blank">
                                    Link<br>
                                    One
                                </a>
                            </li>
                            <li class="nav-item" style="width: 20%">
                                <a class="nav-link" href="http://link02" target="_blank">
                                    Link<br>
                                    Two
                                </a>
                            </li>
                            <li class="nav-item" style="width: 20%">
                                <a class="nav-link" href="http://link03" target="_blank">
                                    Link<br>
                                    Three
                                </a>
                            </li>
                            <li class="nav-item" style="width: 20%">
                                <a class="nav-link" href="http://link04" target="_blank">
                                    Link<br>
                                    Four
                                </a>
                            </li>
                            <li class="nav-item" style="width: 20%">
                                <a class="nav-link" href="http://link05" target="_blank">
                                    Link<br>
                                    Five
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </nav>
            
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
            
</body>
</html>

解决方案 #

一、消除Logo与菜单项的间距

间距来自Bootstrap默认给.container-fluid设置的justify-content: space-between，以及.navbar-toggler的默认上下margin，通过以下样式覆盖：

#mynavbar .container-fluid {
  gap: 0; /* 清除flex布局的默认间距 */
}
.navbar-toggler {
  margin: 0; /* 移除按钮的默认上下margin */
  display: none; /* 可选：垂直布局下无需汉堡按钮，直接隐藏 */
}

二、让菜单项宽度与Logo完全一致

通过调整flex布局属性，让菜单容器继承Logo的宽度，菜单项自动均分宽度：

1. 让.container-fluid和.navbar-collapse拉伸至父级宽度
2. 给.navbar-nav设置width:100%，用flex:1让每个nav-item均分宽度

修改后的完整代码 #

CSS代码

#mynavbar{
  border: 2px solid black;
}

#mynavbarinside{
  border: 2px solid black;
  width: 100%; /* 让菜单容器占满父级宽度 */
}

#mynavbar .container-fluid {
  flex-direction: column;
  gap: 0; /* 消除flex布局间距 */
  align-items: stretch; /* 强制子元素拉伸至父级宽度 */
}

.navbar-toggler {
  margin: 0; /* 移除按钮默认margin */
  display: none; /* 隐藏汉堡按钮 */
}

#site_nav {
  width: 100%;
  display: flex;
  padding-left: 0; /* 移除ul默认内边距 */
}

.nav-item {
  flex: 1; /* 让每个菜单项均分宽度 */
  text-align: center; /* 文字居中对齐 */
}

HTML代码

<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
<body>
<nav id="mynavbar" class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="navbar-brand">
      <img src="https://shapedplugin.com/wp-content/uploads/2023/04/Create-a-full-width-ticker-logo-carousel.png" class="img-fluid">
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="mynavbarinside" class="collapse navbar-collapse show" id="navbarSupportedContent">
      <ul id="site_nav" class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="http://link01" target="_blank">
            Link<br>
            One
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://link02" target="_blank">
            Link<br>
            Two
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://link03" target="_blank">
            Link<br>
            Three
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://link04" target="_blank">
            Link<br>
            Four
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://link05" target="_blank">
            Link<br>
            Five
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>
</html>

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