Bootstrap 4导航栏元素无间距问题咨询

哈哈，这个问题我之前也踩过坑！Bootstrap 4确实默认会给导航栏元素加上合适的间距，出现挤在一起的情况，大概率是你的代码结构或者类名写错了，导致默认样式没生效。咱们一步步来排查修复：

首先，揪出代码里的明显错误 #

看你贴的代码片段，id="nav-main navbar"这里有问题：ID属性的值不能包含空格！navbar是Bootstrap的核心类，应该放到class属性里，而不是ID里。

另外，navbar-expand-md这个响应式折叠类，应该加到nav标签上，而不是外层的wrapper div——这个类需要和navbar类配合使用才能生效。

然后，按Bootstrap标准结构调整导航项 #

Bootstrap 4的导航栏需要用特定的类来触发默认样式，核心是这几个：

• navbar-nav：用来包裹所有导航项的容器
• nav-item：每个导航项的类
• nav-link：导航链接的类

这些类自带了padding和间距样式，只要用上就不会挤在一起了。

修复后的完整代码示例 #

<div class="wrapper">
  <nav id="nav-main" class="nav-main navbar navbar-expand-md" role="navigation">
    <div class="container-fluid">
      <h1 class="hdr-logo navbar-brand">你的Logo</h1>
      <!-- 导航项容器，必须加navbar-nav -->
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="#">Element</a>
        <a class="nav-item nav-link" href="#">Element</a>
        <a class="nav-item nav-link" href="#">Element</a>
        <a class="nav-item nav-link" href="#">Element</a>
        <a class="nav-item nav-link" href="#">Element</a>
      </div>
    </div>
  </nav>
</div>

最后确认一个关键点 #

一定要确保你已经正确引入了Bootstrap 4的CSS文件！如果没引入或者路径错了，那所有默认样式都不会生效，元素自然会挤在一起。

内容的提问来源于stack exchange，提问作者Juan Antonio Rodríguez Gabriel