当我使用navbar-fixed-top时，为什么身体隐藏在navbar后面

Question

我在导航菜单上使用了navbar类。 当我使用navbar-fixed-top ，正文中的某些内容被隐藏在navbar后面。 谁能告诉我为什么会这样？

下面是我一直在努力的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JanaSena Party</title>

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

    </head>
    <body style = "background-color: lightgrey;">
        <div class = "navbar navbar-default navbar-fixed-top">
            <div class = "container">
                <div class = "navbar-header ">
                    <a href = "#" class = "navbar-brand pull-left">BRAND</a>
                    <button class = "navbar-toggle pull-right" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                </div>
                <div class = "collapse navbar-collapse navHeaderCollapse pull-right">
                    <ul class = "nav navbar-nav">
                        <li>
                            <a href = "#">Link1</a>
                        </li>
                        <li>
                            <a href = "#"> Link2</a>
                        </li>
                        <li>
                            <a href="#" class = "active">Link3</a>
                        </li>
                        <li>
                            <a href="#">Link4</a>
                        </li>
                        <li>
                            <button class = "btn navbar-btn btn-danger dropdown-toggle" data-toggle = "dropdown">DropDown<span class =  "caret"></span></button>
                            <ul class = "dropdown-menu">
                                <li>
                                    <a href="#">Facebook</a>
                                </li>
                                <li>
                                    <a href="#">Twitter</a>
                                </li>
                                <li>
                                    <a href="#">Google+</a>
                                </li>
                                <li>
                                    <a href="#">LinkedIn</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class = "row">
                <div class="col-md-6 col-xs-10">
                    <form class = "form-group">
                        <label class = "control-label">Username</label>
                        <input class = "from-control" type = "text" placeholder = "Username">
                        <label class = "control-label">Password</label>
                        <input class = "form-control" type = "password" placeholder = "Password">
                        <label class = "control-label">Confirm Password</label>
                        <input class = "form-control" type = "password" placeholder = "Confirm Password">
                        <label class = "control-label">Email Address</label>
                        <input class = "form-control" type = "Email" placeholder = "harry@potter.com">
                        <label class = "control-label">Date of Birth</label>
                        <input class = "form-control" type = "Date" placeholder = "Date of birth(mm/dd/yyyy)">
                        <label class = "control-label"> What do you think of JSP </label>
                        <textarea rows = "3" class = "form-control" style = "resize: none;"></textarea>
                    </form>
                </div>
            </div>
        </div>
        <div class = "navbar navbar-default navbar-fixed-bottom">
            <p class = "navbar-text">Hail Pawanism</p>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="bootstrap/js/bootstrap.min.js"></script>
     </body>
</html>

Answer 1

只需使用padding-top: 70px; 在body标签的css实现中将应用内容下推。

发生这种情况的原因是，当您应用navbar-fixed-top类时，它将navbar的position定义为Fixed ，并且每当我们在元素中使用CSS中的Fixed定位时，该元素就会从布局流程中移出，因此，在布局之外，您的元素从body的顶部开始。

您可以检查此链接以更好地了解CSS定位

当我使用navbar-fixed-top时，为什么身体隐藏在navbar后面

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-04-15 11:11:23

当我使用navbar-fixed-top时，为什么身体隐藏在navbar后面

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-04-15 11:11:23

解决方案1
4 已采纳 2014-04-15 11:11:23