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

Question

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

Answer 1

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

• 社交媒体
• blog-posts-link

  @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%;
   }
 }

如果有效，请标记为答案；-）