Question

花了几天时间搜索我如何“编辑”Javascript焦点方法才能工作。

我所做的是使用自举固定导航栏，其中我必须使用填充顶部：在CSS的主体上使用70px，这样我的身体内容就不会隐藏在导航栏后面。

但是，如果由于验证目的而尝试着重于文本输入，则焦点方法将重点放在文本输入上，但它隐藏在导航栏后面。

导航条形码

 <!-- Navigation -->
    <div class="row">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">C-Tru</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                   <li>
                        <a href="#">Testing</a>
                    </li>
                    <li>
                        <a href="#">Submissions</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</div>

我使用了以下CSS设置

<!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }

在Body中我执行了以下操作（修改为简化）

<div class="container">
                <div class="row">
                    <form class="form-horizontal">
                    <div class="col-md-4">


                            <div class="form-group">
                                <label for="semester" class="control-label col-xs-3">Date</label>
                                <div class="col-xs-9">
                                    <input type="input" class="form-control" id="semester" placeholder="eg. yyyymmdd">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="testingcode" class="control-label col-xs-3">Test Code</label>
                                <div class="col-xs-9">
                                    <input type="input" class="form-control" id="testingcode" placeholder="eg. UAT1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="subject" class="control-label col-xs-3">Subject</label>
                                <div class="col-xs-9">
                                    <input type="input" class="form-control" id="subject" placeholder="eg. Chinese">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

发生的事情是我在焦点测试代码上做了一个javascript，但测试代码是专注的，但是我不得不向上滚动以便它不再隐藏在导航栏后面。（我有很多其他控件在我想要构建的那个中，所以我需要向下滚动）

我查找了这个问题并找到了人们建议的其他几个选项

来自Bootstrap css hides portion of container below navbar navbar-fixed-top

上一篇文章，似乎有一个调整大小的答案，但它似乎对焦点部分没有帮助。

希望这不是太难理解，会尝试捕获视频并分享它以便它可以帮助我的解释

Javascript Dom Focus被Bootstrap导航栏阻止

0 个答案: