Question

我在导航菜单中使用navbar类。当我使用类navbar-fixed-top时，正文中的一些内容隐藏在导航栏后面。任何人都能告诉我为什么会这样吗？

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

<!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

只需在正文标记的css实现中使用padding-top: 70px;即可将您的内容推送到应用中。

这是因为当你应用navbar-fixed-top类时，它将导航栏的position定义为Fixed，并且每当我们在CSS中使用固定定位时元素被移出的元素布局的流程，因此当导航栏不在布局中时，元素从body的顶部开始。

您可以查看this link以更好地了解CSS定位

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

1 个答案: