引导程序不从母版页文件中起作用

Question

我有一个母版页，在使用引导程序的页面中有一个标题栏。

这是代码

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <div class="left">
                    <asp:ImageButton ID="btn_home" runat="server" ImageUrl="../Images/HeadHome.png" CssClass="headIcons" />
                </div>
                <div class="left">
                    <asp:ImageButton ID="btn_config" runat="server" ImageUrl="~/Images/HeadConfig.png" CssClass="headIcons" />
                </div>
                <div class="right">
                    <asp:ImageButton ID="btn_profile" runat="server" ImageUrl="~/Images/HeadProfile.png" CssClass="headIcons" />
                </div>
            </div>
            <!--/.navbar-collapse -->
        </div>
    </nav>

这是我的 Webform ASPX 代码

    <div class="row">
        <div class="col-md-12"">
            <div class="b-orange" style="background-color: #f29123; height: 5px;"></div>
        </div>
    </div>

<div class="row">
    <div class="col-md-12" style="top: 60px;">
        <img src="../Images/bSimplex_Header_Logo.jpg" style="margin: 0 auto; display: block;" />
    </div>
</div>

问题是页面添加了页眉但无法识别高度，所以当我在页面中添加内容时，它从顶部而不是从页眉开始

一些图片：

您可以在我的 ASPX 页面中的第一行从最顶部开始，而不是从母版页中的导航栏开始。

Answer 1

那是因为navbar-fixed-top 使导航栏被position: fixed; 粘住了。

要让页面内容始终位于导航栏下方，请添加正文填充：

body { padding-top: 50px; }

或者使用更少的更好：

body { padding-top: @navbar-height; }

见Bootstrap documentation on fixed-to-top navbar