Question

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

want to get nav to look like this when small screen

want to get nav to look like this

<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。根据我的理解，您希望导航栏保持静态，直到用户向下滚动到导航栏到达窗口顶部的位置。然后你想要它被修复。

在第一个navbar元素上方添加Contact 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中添加一个类的，这会在更改类时停止导航栏后面的内容消失。

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

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

如何自定义bootstrap默认顶部固定导航如下图中的一个？

1 个答案: