Bootstrap 4导航栏导航项间距自适应视口问题求助

DevOps 小满

2026-8-21

解决Bootstrap 4导航栏导航项自适应间距问题

问题根源

你当前代码里的 navbar-nav>li { padding-right: 9em; } 使用了固定值，在小视口下会直接导致导航项挤在一起甚至溢出容器，无法实现随屏幕尺寸自适应的效果。

解决方案

1. 替换固定内边距，用Flexbox实现自适应分配

Bootstrap的.navbar-nav本身是Flex容器，我们可以利用Flex属性让导航项在可用空间内均匀分布，同时结合媒体查询调整不同屏幕下的间距：

/* 移除原固定padding */
.navbar-nav>li {
  padding-right: unset;
}

/* 基础样式：让导航项平分空间，添加基础内边距 */
.navbar-nav .nav-item {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
}

/* 大屏幕下增大间距，保持视觉舒适 */
@media (min-width: 992px) {
  .navbar-nav .nav-item {
    padding: 0 2rem;
  }
}

2. 优化品牌与导航栏的响应式适配

把固定尺寸和内边距替换为响应式单位，避免小屏幕溢出：

.mynav .myBrand {
  color: #fff;
  font-size: 36px;
  padding-left: 1rem; /* 替换原pl-xl-5，适配全屏幕 */
}

.navbar {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1.5rem 0; /* 用rem替代固定px，适配不同字体缩放 */
}

3. 调整导航链接字体的响应式大小

大字体在小屏幕下容易溢出，添加媒体查询动态调整：

.navbar .navbar-nav li a {
  color: #fff;
  font-size: 1.25rem; /* 基础小字体，适配小屏幕 */
  font-weight: 600;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  text-transform: uppercase;
}

/* 大屏幕下恢复原大字体 */
@media (min-width: 992px) {
  .navbar .navbar-nav li a {
    font-size: 1.5625rem; /* 等价于25px */
  }
}

完整修改后代码

CSS代码

.mynav .myBrand {
  color: #fff;
  font-size: 36px;
  padding-left: 1rem;
}

.navbar {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1.5rem 0;
}

/*link*/
.navbar .navbar-nav li a {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .navbar .navbar-nav li a {
    font-size: 1.5625rem;
  }
}

.navbar-nav .nav-link:hover {
  color: #cda45e;
}

/*link hover color*/
.navbar-nav .nav-link:focus {
  color: #fff;
  outline: 0;
}

/*Nav item spacing*/
.navbar-nav>li {
  padding-right: unset;
}

.navbar-nav .nav-item {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
}

@media (min-width: 992px) {
  .navbar-nav .nav-item {
    padding: 0 2rem;
  }
}

/*Hamburger*/
.custom-toggler .fa-solid {
  width: 80px;
  color: #fff;
  margin: 6px 0;
}

.custom-toggler .fa-solid:hover {
  width: 80px;
  color: orange;
  margin: 6px 0;
}

/*Dropdown arrow*/
.dropdown-toggle::after {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin: -.3em 0 0 -.1em;
  vertical-align: middle;
  content: "";
  border: .3em solid;
  border-width: 0 .15em .15em 0;
  transform: rotateZ(45deg)
}

/*Dropdown menu*/
.dropdown-menu #myList a {
  color: #000;
  font-size: 14px;
  padding: 30px;
}

#navbarNav li a:hover {
  color: #cda45e;
  background-color: transparent;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

HTML代码（修复结构错误+调整品牌内边距）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg mynav " id="navbar_top">
  <div class="container-fluid">
    <a class="navbar-brand myBrand" href="index.html">Web Title</a>

    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fa-solid fa-bars fa-xl" style="width:40px"></i>
              </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#top-content">Top</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#services">Services</a>
        </li>
        <!--Dropdown Menu Start-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#about-us" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      About
                     </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <div class="d-lg-flex align-items-start justify-content-start" id="myList">
              <div>
                <a class="dropdown-item pb-3" href="#lunch"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;LUNCH MENU</a>
                <a class="dropdown-item pb-3" href="#dinner"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;EVENING MENU</a>
                <a class="dropdown-item pb-3" href="#"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;DESSERT MENU</a>
              </div>
              <div>
                <a class="dropdown-item pb-3" href="#drinks"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;DRINKS MENU</a>
                <a class="dropdown-item pb-3" href="#BOOK"><img src="assets/images/img1.jpg" alt="menu image">&nbsp;BOOK A TABLE</a>
              </div>
            </div>
          </div>
        </li>
        <!--Dropdown Menu End-->
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#testimonials">Clients</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

核心说明

用flex:1让导航项平分可用空间，实现间距自适应
媒体查询针对不同屏幕调整间距和字体大小，避免小屏幕溢出
修复了原HTML中缺失的Dropdown列表项闭合标签，保证结构正确

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

Bootstrap 4导航栏导航项间距自适应视口问题求助

问题根源 #

解决方案 #

1. 替换固定内边距，用Flexbox实现自适应分配 #

2. 优化品牌与导航栏的响应式适配 #

3. 调整导航链接字体的响应式大小 #

完整修改后代码 #