使用Twitter Bootstrap在前端管理栏上方留出过多空白

时间:2014-02-18 作者:Michael Ecklund

The problem (Excess White Space Above Admin Bar on Frontend Using Twitter Bootstrap):

登录并查看前端时,如果缩小浏览器,管理栏上方会出现过多的空白。我注意到它的全屏效果很好,甚至是~平板电脑大小。然而,当要缩小到小于600px时,管理栏上方会出现空白。我已经在手机上进行了测试,手机上也有空白。

The Question:

这是WordPress的一个冲突问题,还是我需要对我的Twitter引导设置做些什么?

任何关于在移动设备上查看前端(使用推特引导-响应)时消除管理栏上方多余空白的建议都将不胜感激。

2 个回复
最合适的回答,由SO网友:Jacob Swain 整理而成

我也遇到了这个问题,原因是在600像素宽的管理栏上,从位置:固定到位置:绝对;

固定后,它锁定在屏幕顶部(顶部:0)

绝对时,它锁定在包含它的最近容器的顶部。默认情况下,这是html元素,但如果父元素被定义为具有位置(在本例中,主体具有位置定义),则它将包含其所有子元素,并且它们的位置规则将基于其位置。由于html元素的边距顶部为46像素,因此它会将主体向下推46像素。因此,由于正文向下推了46个像素,我们的管理栏所能达到的最佳效果就是正文的顶部,而不是页面的顶部。

如果你需要在身体上有一个相对的位置,那么你可以做一些事情来解决这个问题。您可以将这些规则中的任何一个添加到主题css文件中,它将覆盖默认的wordpress css。

您可以覆盖管理栏位置绝对规则,并将其翻转回固定。这将使管理栏与页面一起滚动,以便无论您在页面的何处,都能在顶部看到它。

html #wpadminbar{position:fixed};

@media screen and (max-width:600px){html #wpadminbar{top:-46px}}

SO网友:Michael Ecklund

这很简单。我有position: relative; 设置为body.

Example:

body {
    position: relative;
}
我不知道为什么会这样,但是position: relative; 对于<body> 标记修复了浏览器大小为<;时,前端管理栏上方多余的空白;600像素。

结束

相关推荐

Front-End Post Submission

我正在尝试添加一个表单,用户可以从前端提交帖子。我正在学习本教程:http://wpshout。com/wordpress从前端提交帖子/我正在做的是添加this code 到我的一个页面模板。表单显示正常,但当我单击“提交”按钮时,它会显示“Page not found error“”许多评论者说这不起作用。谁能给我指出正确的方向吗?代码是否不完整?有缺陷吗?我做错什么了吗?谢谢Towfiq I。