html - 导航栏和页脚在Mobile View 上未对齐-Bootstrap

原文 标签 html css twitter-bootstrap

我通过引导程序创建了一个菜单栏,当窗口宽度较小时,导航栏变成按钮菜单。当窗口宽度变小时,右侧的按钮被向下按下并且与左侧的徽标不对齐。

对于页脚,我使用col-md-6创建了两列,并将text-align: left, text-align: right应用于每列,因为它们不在侧面。现在,当窗口宽度较小时,会发生相同的事情:右侧的文本/列被向下按下,并且与左侧的文本不对齐。

导航和页脚均未正确垂直对齐。我试图在按钮和被按下的文本上都设置负的页边距。我也尝试过使用pull-leftpull-right,也没有什么区别。我也没有媒体查询,但是我不确定这是否是一个问题。

这是一个示例和代码:http://jsfiddle.net/w92w4dak/

关于如何垂直对齐导航/页脚的任何想法将不胜感激。

最佳答案

.navbar-toggle按钮需要位于.navbar-header div内才能实现所需的垂直对齐。

页脚列应具有类.col-xs-6而不是.col-sm-6,以确保它们在所有屏幕尺寸(包括移动视图)下都保持为屏幕宽度的50%

关于html - 导航栏和页脚在Mobile View 上未对齐-Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32998863/

相关文章:

css - 如何在JQM data-role = mini上保持相同的宽度?

ios - Cordova/Phonegap忽略iOS中div的高度值

twitter-bootstrap - bootstrap 在 Laravel 5.6 中不起作用

html - Bootstrap Col与Webkit专栏

html - Laravel中的Ajax删除

javascript - 可编辑元素占位符不平滑

html - 响应正方形填充100%行

html - 如何在不同的div中左对齐textareas?

html - 某些div内的文本在EI7中显示时不正确

twitter-bootstrap - 使用Dart和Bootstrap