html - 如何摆脱响应式导航栏上的溢出？

Question

我的导航栏有问题。我将 Bootstrap 用于响应式导航栏，但它在我网站的移动版本上溢出。我使用了 overflow-x: hidden on body 它解决了较大版本的问题，但不是移动版本。我已经检查了导航栏中所有元素的边距/填充问题，但似乎找不到问题所在。如果您查看小于 500 像素的问题，您可以在右侧的 www.tcbarringerphotography.com 上看到该问题。有什么想法吗？

Answer 1

您的问题是您在页脚中使用的两个类的宽度

• 社交媒体
• 博客文章链接

  @media only screen and (max-width: 1040px) {
   .social-media {
       width: 100%;
    }
   .blog-posts-links {
       width: 100%;
   }
 }

在媒体屏幕最大宽度:576px 处将宽度减小到 90%；

  @media only screen and (max-width: 576px) {
   .social-media {
       width: 90%;
    }
   .blog-posts-links {
       width: 90%;
   }
 }

如果有效，请标记为答案谢谢;-)