Javascript 为什么在全页面宽度时，品牌徽标不与内容对齐？

具体化css版本：v0.100.2

布局行为要求：

• 响应性侧菜单，当低于992px屏幕宽度时隐藏
• 隐藏侧菜单时，左上角会出现菜单图标
• 顶部导航栏是固定的
• 当屏幕宽度>=992px时，品牌徽标类将在导航栏中居中
• 当屏幕宽度<992px时，品牌徽标类别将左对齐

结果：我让它按照我的要求工作

问题:

当屏幕宽度<992px时，品牌徽标类将左对齐，但不会与屏幕宽度>=992px时菜单图标的方式一样刷新内容

注:

这是我第一次使用代码笔和堆栈片段。如果我没有正确使用它们，请纠正我。我遵循和中的示例

看到我的密码笔了吗

在这里查看我的stackoverflow代码片段

jQuery（函数（$）{
$（“.button collapse”）.sideNav（）；
});
/**
*正文CSS
*/
html，
身体{
身高：100%；
背景色：#eee；
}
html，
身体，
输入，
文本区，
钮扣{
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本阴影：1px1px1pRGBA（0,0,0,0.004）；
}
/**
*布局CSS
*/
页眉、主页眉、页脚{
左侧填充：300px；
}
@仅介质屏幕和（最大宽度：992px）{
页眉、主页眉、页脚{
左侧填充：0；
}
}
/**
*助手类
*/
.没有边际{
保证金：0px！重要；
}














Brand.io
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·索利西图丁·帕特·莫莱斯蒂。Nullam id临时nulla。我们坐在那里，等待着我们的到来。暂时性生活，暂时性生活。在直径为三倍的情况下，苏打水和苏打水的生命是相同的。莫里斯·迪克特（Mauris dictum）是一名孕妇侵权人。不，不，不，不，不，不，不，不，不，不，不，不。这是老街上的一家餐馆，这里的生活是清淡的。这是一个非常重要的问题。请不要因为没有福西布斯而抱怨。两种元素，一种是前威尼斯人，另一种是大山羊，另一种是猫科动物。不喝苏打水。佩伦特斯凯是一位杰出的汽车制造商

这是一种交通工具，它是一种交通工具。奥迪奥托托托葡萄品种。普尔文纳智人。Praesent ac sodales sem。马萨乌尔特里斯酒店。她坐在码头上对欧盟进行大规模的指控。Etiam feugiat semper的饮食。在前庭安装了一个sem vitae massa调味品。在vehicula，他是一个伟大的自由主义者，他是一个伟大的自由主义者，他是一个有效的自由主义者。在一个漩涡里，我坐在那里。如果你不愿意的话，我就不去了

这是一个连续的设施。南欧purus purus。利古拉码头的库拉比图尔。纳姆·尤伊斯莫德·利古拉·佩伦茨克·拉奥里特。阿利奎姆·埃拉特·帕特。库拉比图尔欧盟比本杜姆维利特。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。知识的有效性取决于法雷特拉港。残酷的厄洛斯坐在阿梅特·森佩尔的位子上

页脚内容
您可以使用此处的行和列来组织页脚内容
链接






用♥ 商业编码员
应该有其他方法来解决您的问题。你面临这个问题是因为你的导航有
位置：固定的
和
宽度：100%
，另一方面，你给导航的父元素（和其他元素）添加了
左侧填充：300px
，但当你有
固定的
元素时，它不会调整到它的父元素，只会将
npx
移到两侧。


请注意：这不是唯一的解决方案

CSS：

nav {
    color: #fff;
    background-color: #ee6e73;
    width: calc(100% - 300px);/* this will fix your issue */
    height: 56px;
    line-height: 56px;
}

在css中更新您的
nav
，或者在主css文件的最后一行添加上述代码

更新：

这正是解决这个问题的方法

在

/**
 * Layout CSS
 */

 header, main, footer {
   padding-left: 300px;
 }

 /**
  * fix the left align for brand-logo
  */
 nav {
   width: calc(100% - 300px);
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
   /**
    * allows the menu button to be left-aligned in < 992px screen
    */
   nav {
     width: 100%;
   }
 }

/**
*布局CSS
*/
页眉、主页眉、页脚{
左侧填充：300px；
}
/**
*固定品牌徽标的左对齐
*/
导航{
宽度：计算（100%-300px）；
}
@仅介质屏幕和（最大宽度：992px）{
页眉、主页眉、页脚{
左侧填充：0；
}
/**
*允许菜单按钮在<992px屏幕中左对齐
*/
导航{
宽度：100%；
}
}
谢谢。你的回答很有帮助。但在我将其标记为正确之前，我将对其进行大量编辑，因为我无法使用您的答案，因为其他内容将损坏。@KimStacks我刚刚在您的代码笔中测试了它，但没有损坏任何内容菜单按钮将不再在<992px屏幕中左对齐。因此，当屏幕宽度<992px时，我必须将nav设置为100%宽度