Html 调整导航栏以适应屏幕宽度

我想增加顶部社交按钮、导航菜单和页脚社交小部件下方的边框宽度，以适应屏幕的宽度，但似乎不知道如何操作

---

我的页面-

按照网站的构建方式，您可以完全删除OuterRapper，并将容器类应用于希望保持1100px宽度的元素

删除outerrapper div、围绕导航的container div以及将container类添加到widget content div将实现您在本例中希望的布局。

您将top social nested作为.outerrapper的子级

如果删除属性宽度：1100px；从.outerrapper开始，它将扩展顶部社交组件的整个宽度

基本上，Outerrapper使top social的最大区块宽度为1100px

如果你在Mac上打开Chrome developer tools command+option+i，你将能够选择.outerRapper并取消选中宽度：1100px；您将看到所需的输出

我认为这是最简单的解决方案，我认为只要做一个改动，它就可以正常工作

如果通过删除此“最大宽度”在其他地方发现问题，则可以在与.outerwrapper相同的顶层创建另一个容器，并将顶部导航项放在其中。您将全宽度顶部导航嵌套在宽度受限的父组件（垂直轨道中较高的组件）中，嵌套到嵌套的顶部社交组件中，这意味着顶部社交组件从其父.outerwrapper继承此最大宽度

希望这有帮助！ @javascriptjames

只需在html中的OuterRapper div之外保留您的div的id为top social，就可以了。