如何自定义引导程序默认顶部固定导航，如下图所示？

Question

我正在尝试自定义引导程序默认的固定顶部导航，使其类似于下图中的导航。我正在使用最新的 twitter 引导程序 3.1.1。如果你知道请帮助我。您甚至可以帮助我使用任何存储库。图片中的那个是我购买的，它使用的是 bootstrap 2x，但我想将其更新为 3x 并在另一个模板中使用它。

<div class="topHeaderSection">      
    <div class="header">            
        <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="index.html"><img src="assets/custom/img/logo.png" alt="My web solution" /></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">

          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
            <li><a href="#about">About us</a></li>
            <li><a href="#about">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    </div>

Answer 1

您需要将下拉按钮从具有折叠类的 div 中取出，并将其放入 navbar-header div。然后为应用程序标题创建一个额外的 navbar-header。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Title - manually pull it left-->
        <div class="navbar-header pull-left">
            @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })  
        </div>

        <!-- Buttons that won't collapse - and manually pull right-->
        <div class="navbar-header pull-right">

            <!-- Your drop down button that is not part of the collapse group -->
            <ul class="nav pull-left">
                <li class="dropdown pull-right">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="margin-top: 5px;">Services <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>

            <!-- The normal bootstrap button to show collapsed menu items -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <!-- Regular collapsed items -->
        <div class="navbar-collapse collapse navbar-right">             
            <ul class="nav navbar-nav pull-right">
                <li><a href="#about">About us</a></li>
                <li><a href="#about">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

查看类似问题的答案：https://stackoverflow.com/a/22978968/1721571。 此答案中包含一个指向小提琴的链接，它应该对您有所帮助。我试过了，它运行良好，没有任何变化。 如果你想直接跳进去，这里是链接。小提琴：http://jsfiddle.net/nomis/n9KtL/1/

更新

您的其他要求可能需要一些 JavaScript。据我了解，您希望导航栏保持静态，直到用户向下滚动到导航栏到达窗口顶部的位置。然后你希望它被修复。

在第一个导航栏元素上方添加您的联系人 div。我已将其设为默认导航栏，因此区别更加明显。您不必使用引导导航或容器类。您可以创建自己的风格并获得自己喜欢的风格：

<div class="navbar navbar-default navbar-static-top" style="margin-bottom:0px"     role="navigation">
    <div class="container">
        <div class="text-info">Small div with contact information</div>
    </div>
</div>

现在将原始导航栏更改为静态以开始。我们还将给它一个菜单类，以便我们可以使用 jQuery 选择它：

<div class="navbar navbar-inverse navbar-static-top menu" role="navigation">

对于 JavaScript：

$(document).ready(function () {

    var menu = $('.menu');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            $('.menu').addClass('navbar-fixed-top');               
            $('.body-content').addClass('menu-padding');
        } else {
            $('.menu').removeClass('navbar-fixed-top');              
            $('.body-content').removeClass('menu-padding');
        }
    }

    document.onscroll = scroll;
});

注意我是如何向 body-content 添加一个类的，这会阻止内容在更改类时消失在 navbar-fixed 后面。

.menu-padding {
        padding-top: 80px;
    }

这是完整的小提琴：http://jsfiddle.net/seanobr/wsNYQ/