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>

问题是该页面添加了标题但没有识别高度，所以当我在页面中添加内容时，它会从顶部而不是从标题中显示

一些图片：

enter image description here

正如您所知，我的ASPX页面中的第一行是从顶部开始，而不是从母版页中的导航栏开始。

Answer 1

这是因为navbar-fixed-top使导航栏粘贴position: fixed;。

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

body { padding-top: 50px; }

甚至更好地使用less：

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

请参阅Bootstrap documentation on fixed-to-top navbar

Bootstrap不起作用于母版页文件

1 个答案: