Bootstrap 4移动端导航栏菜单字体增大问题求助

先梳理你现有代码里的几个核心问题：

• HTML里重复使用id="m1"，id是唯一标识，浏览器只会把样式应用到第一个匹配元素，后面的菜单不会生效，必须换成class。
• 媒体查询逻辑写反：你需要小屏幕（移动端）增大字体，但当前min-width:375px是屏幕宽度≥375px时生效，应该用max-width，结合Bootstrap 4导航栏默认折叠断点（992px），用max-width: 991px更准确。
• 样式优先级不足：Bootstrap自带的.nav-link样式可能覆盖你的设置，需要更精准的选择器。

修正后的完整代码 #

HTML部分

将重复id替换为class：

<div class="collapse navbar-collapse" id="MyNavBarDiv">
  <ul class="navbar-nav ml-auto" style="margin-right: 60px;">
    <li class="nav-item">
      <a class="nav-link m1" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link m1" href="#">About-us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link m1" href="#">EduCare</a>
    </li>
  </ul>
</div>

CSS部分

调整选择器与媒体查询逻辑，确保移动端样式生效：

/* 桌面端默认样式 */
.m1 {
  color: darkblue;
  font-weight: bold;
  font-size: 1.25rem;
}

.m1:hover {
  text-decoration: underline;
  text-decoration-color: red;
}

/* 移动端（导航栏折叠状态）增大字体 */
@media (max-width: 991px) {
  .navbar-collapse .m1 {
    font-size: 1.5rem; /* 可根据需求调整字号 */
    font-weight: bolder;
  }
}

.nav-item {
  list-style-type: disc;
  padding: 1.1rem; /* 补全单位，避免浏览器不识别 */
  margin-left: .5cm;
  margin-right: 0;
}

关键说明 #

• 用.navbar-collapse .m1作为选择器，确保样式仅作用于折叠导航栏内的菜单项，不干扰桌面端显示。
• max-width:991px匹配Bootstrap 4默认的导航栏折叠断点（屏幕宽度<992px时折叠），若项目自定义了折叠断点，需替换为对应数值。
• 补全padding的单位，避免样式失效。

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