为什么当我使用导航栏固定顶部时身体隐藏在导航栏后面

Question

为什么当我使用导航栏固定顶部时身体隐藏在导航栏后面

Har*_*ama 3 html javascript css twitter-bootstrap

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Shi*_*iva 6

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

这是因为，当你申请的navbar-fixed-top类，它定义了position导航栏作为Fixed，每当我们使用固定定位在CSS中该元素被移出布局的流动，所以当导航栏的布局你的元素开始的元素从body.

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

归档时间：	11 年，7 月前
查看次数：	6875 次
最近记录：	11 年，7 月前