html - Bootstrap 不从母版页文件执行

Question

我有一个母版页，在使用 Bootstrap 的页面中有一个标题栏。

这是代码

    <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