Bootstrap导航栏对齐#three元素且不使用col-md-4的实现方法

不用额外列包裹、不改动原有导航结构的前提下，有两种靠谱的实现方式：

方法一：自定义媒体查询样式（最直接） #

直接给#nav添加针对桌面端的宽度和对齐样式，移动端完全保留主题原有逻辑：

/* 仅在md及以上屏幕生效（对应Bootstrap的md断点，768px以上） */
@media (min-width: 768px) {
  #nav {
    width: 33.333%; /* 和col-md-4的宽度完全一致 */
    margin-right: auto; /* 强制左对齐 */
  }
}

把这段代码加到你WordPress主题的「额外CSS」里（外观→自定义→额外CSS），桌面端导航会和#three宽度一致且左对齐，移动端导航不受任何影响，不会出现无法展开的问题。

方法二：自定义Bootstrap工具类（更符合框架风格） #

如果习惯用Bootstrap的类名方式，可以先自定义宽度工具类，再给#nav添加类：

1. 先添加自定义工具类CSS：

.w-md-33 {
  width: 33.333% !important;
}

2. 给#nav元素添加两个类：w-md-33 ms-md-0
   • w-md-33：md及以上屏幕宽度设为33.333%
   • ms-md-0：md及以上屏幕左边距清零，实现左对齐

这种方式同样不会修改原有导航的DOM结构，完全兼容主题的移动端导航逻辑。

注意事项 #

• 如果#three不是用col-md-4，而是其他宽度，把CSS里的33.333%改成对应数值即可（比如col-md-3对应25%）
• 不要直接修改主题核心CSS文件，用「额外CSS」或者子主题的style.css，避免主题更新后样式丢失

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