对于我的C＃asp.net mvc Razor _layout页面，我找不到为Bootstrap页面实现2行Header / Navbar的解决方案 使用navbar-fixed-top
我的设计需要
•顶部有一个简单的1行功能，其中包含指向联系信息和社交媒体链接的超链接。
及以下
•标准引导程序导航栏
这是一个屏幕截图，说明我需要实施的内容（从我购买的模板来构建网站） -
该实现中的2行菜单在任一行中都没有navbar-fixed-top类。
当我运行我的版本时 - 使用class =＆＃34; navbar-fixed-top＆＃34;在下排 - （标准的Bootstrap导航栏）
向下滚动时 - 页面正文被下方导航栏隐藏，但显示在顶层标题顶部
其次
顶部导航栏没有响应行为
底部菜单适用于small / xsmall
但是
社交媒体图标不包装...当在电话上显示时，只有最左边（电话电子邮件链接）出现在顶部 - 即使顶行被配置为一组两个xs-small-12列< / p>
（下面的标准Bootstrap导航栏工作正常（
我相信我的代码符合标准的Bootstrap约定...但我不会将此报告为错误... /认为此设计是不受支持的功能。
是否有使用某些脚本代码的解决方法？
我正在寻找能够显示最佳做法的答案：
•滚动时保持身体不会出现在顶部标题上
•使顶部标题真正响应并在页面落入sm-xs大小时将顶部标题的两边堆叠在每个othw = er上面？
考虑和加载页面后在标准导航栏上方注入顶层菜单的Angular或jQuery函数 - 如果浏览器调整大小，则重复该过程
所有建议都表示赞赏。谢谢，史蒂夫
答案 0 :(得分：1)
搞定了！希望你们中的一些人觉得这很有用....这么多具有复杂（和简单）导航条的顶级网站滚出页面....不是一个非常好的用户体验恕我直言
navbar-fixed-top类是包含链接的两行（1）顶行和（2）导航栏
的部分的属性（还需要对边距和填充进行一些CSS更改....
奇怪的是，注入到_Layout的视图溢出了包含RenderBody（）的div的Container / Row部分，并隐藏了标题后面的renderred视图的顶部..需要通过边距设置来修复它
=======集装箱/行被注册到布局＆＃34; RenderBody＆＃34; =======
<div class="container-fluid">
<div class="row">
******Main Page Content Here******
</div>
</div>
这里是固定......
navbar-fixed-top class is property of section that wraps the top row with links and the navbar
<section id="NFTParent" class="navbar-fixed-top">
<header id="Header-1" class="header">
@*<nav class="navbar navbar-default role=navigation">*@
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 header-info-wrapper">
<ul class="list-inline">
<li><i class="fa fa-phone fa-lg"></i> Phone: 888-925-1858</li>
<li><i class="fa fa-envelope"></i> Mail: <a href="mailto: info@avanttek.com"></a></li>
</ul>
<!-- /.list-inline -->
</div>
<!-- /.header-info-wrapper -->
<div class="col-xs-12 col-sm-4 social-link-wrapper">
<ul class="social-links">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
.
.
.
<li><a href="#"><i class="fa fa-envelope fa-lg"></i></a></li>
</ul>
<!-- /.social-links -->
</div>
<!-- /.social-link-wrapper -->
</div>
<!-- /.row -->
</div>
@*</nav>*@
<!-- /.container -->
</header>
<!-- /.header-1 -->
@*<header id="header-2" class="header navbar-fixed-top">*@
<header id="header-2" class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
@*<div class="row">*@
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Avant<span>Tek</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" style="height: 0.666667px;">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Home</a>
<ul class="dropdown-menu">
<li><a href="#">Home Layout 1</a></li>
<li><a href="#">Home Layout 2</a></li>
<li><a href="#">Home Layout 3</a></li>
<li><a href="#">Home Layout 4</a></li>
<li><a href="#">Home Layout 5</a></li>
</ul>
</li>
<!-- /.container -->
</div>
</nav>
<!-- /.navbar -->
</header>
</section>
</div>
<div>
@RenderBody()
</div>
=================== CONTAINER / ROW IS INJECTED INTO LAYOUT VIA RenderBody() ===========================
<div class="container-fluid">
<div class="row">
LORUM IPSUM ..... CONTENT EMBEDDED IN ROW COLUMNS
</div>
</div>