MaterializeCSS导航栏无法拆分内容为两行的问题求助

问题出在你嵌套了row组件，Materialize的row默认带有margin和padding，会导致内容超出导航栏范围；同时导航栏默认高度有限，需要调整内部元素布局来让内容在栏内正常换行。

修正后的代码： #

<nav class="blue-grey darken-4">
  <div class="nav-wrapper">
    <div class="right-align" style="padding-right: 20px;">
      <div id="ip_address" class="white-text">IP: 192.168.1.1</div>
      <div id="country" class="white-text">Country: China</div>
    </div>
  </div>
</nav>

关键修改说明： #

• 改用Materialize导航栏标准的.nav-wrapper容器替代自定义row，避免布局冲突
• 给信息容器添加.right-align让内容靠右，同时设置右侧内边距避免贴边
• 给文本添加.white-text，确保在深色导航栏上清晰可见
• 移除嵌套的row和col，让两个div以块级元素自然换行

如果需要更紧凑的布局，可以给文本元素添加自定义样式控制行高：

#ip_address, #country {
  line-height: 1.2;
  margin: 4px 0;
}

这样就能让IP和Country在导航栏内分两行显示，不会跳出到页面主体中。

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