Question

我正在使用bootstrap 3.我的代码位于div .navbar下方正确显示在顶部。但问题是.container它没有显示在.navbar下面我应该做些什么改变才能正常工作

 <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="#">My Office</a>
                </div>
                <div class="navbar-collapse collapse pull-right top-margin">
                    <form  class="form-inline" method="post" action="login">
                        <div class="form-group">
                            <input type="text" placeholder="Username" name="userName" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="Password" name="password" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-success">Sign in</button>
                    </form>
                </div><!--/.navbar-collapse -->
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs10">Join us</div>
                <div class="col-xs-2">
                    <button type="submit" class="btn btn-default">Sign Up</button>
                </div>
            </div>
        </div>
    </body>

Answer 1

您需要在固定导航栏的body顶部添加填充：

body { padding-top: 70px; }

来自文档：

固定的导航栏将覆盖您的其他内容，除非您添加填充到＆lt; body＆gt;的顶部。尝试自己的价值观或使用我们的下面的片段。提示：默认情况下，导航栏高50像素。

.conaviner没有显示在.navbar下面

1 个答案: