twitter-bootstrap – 将焦点从固定页眉或固定页脚下移出输入

有没有办法设置填充或边距,或调用 javascript移动输入元素,焦点,从固定的导航栏下移动到视图？

我正在使用bootstrap 3.1并创建了一个bootply来显示我正在努力的东西.

问题是当用户使用“Tab”键逐步浏览输入元素并且输入元素落在固定的顶部导航栏或固定的底部导航栏后面时.

让它隐藏在顶部导航栏下并不像底部导航栏那么糟糕,因为控制流从顶部开始.如果用户选中备份表单,则控制流程存在问题.

以下是bootply的URL：http://bootply.com/110608#

谢谢

解决方法

您可以使用jQuery动画来滚动主体,因为每个输入都是聚焦的.

$('input').focus(function() {
    var ele = $(this);
    $('html,body').animate({
        scrollTop: ele.offset().top - 80 /* 80 is height of navbar + input label */
    },800);
});

演示：http://bootply.com/110643