【问题标题】:Nav Bar and Footer Unalign on Mobile View - Bootstrap导航栏和页脚在移动视图上对齐 - Bootstrap
【发布时间】:2015-10-08 01:47:05
【问题描述】:

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

对于页脚,我使用col-md-6 创建了两列,并将text-align: left, text-align: right 应用到每一列,因为它们并没有偏向一边。现在当窗口宽度变小时,同样的事情会发生:右边的文本/列被向下推,与左边的文本不对齐。

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

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

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

【问题讨论】:

    标签: html css twitter-bootstrap


    【解决方案1】:

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

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

    【讨论】:

    • 完美,谢谢。没想到这么简单
    猜你喜欢
    • 1970-01-01
    • 2018-08-12
    • 2020-11-16
    • 1970-01-01
    • 2014-05-08
    • 1970-01-01
    • 1970-01-01
    • 2012-05-03
    • 2015-01-23
    相关资源
    最近更新 更多