Question

如何在折叠时显示品牌下的导航栏链接：

这就是我目前所拥有的品牌旁边的链接：

这是我的HTML标记，bootstrap CSS是默认的：

<!-- Navigation Bar Start -->
    <div class = "navbar navbar-default navbar-static-top"> 

        <!-- Container -->
        <div class = "container">

            <div class=".navbar-header">

            <!-- Site Title -->
            <a href = "../index.html" class = "navbar-brand">James Woods</a>

            <!-- Mobile Nav Button -->
            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button> <!-- END Mobile Nav Button -->

            <!-- Navigation Links -->
            <div class = "collapse navbar-collapse navHeaderCollapse">

                <ul class = "nav navbar-nav navbar-right">

                    <li><a href = "../index.html">Home</a></li>
                    <li><a href = "">Creations</a></li>
                    <li class="active"><a href = "">Blog</a></li>

                    <li class = "dropdown"> 
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Links<b class = "caret"></b></a>

                        <ul class = "dropdown-menu">
                            <li><a href = "#">Twitter</a></li>
                            <li><a href = "#">Deviant Art</a></li>
                            <li><a href = "#">Scratch</a></li>
                        </ul>
                    </li> <!-- END Links Nav -->

                    <li><a href = "../contact.html">Contact Me</a></li>

                    <li>

                        <form class="navbar-form navbar-left form-inline" id="search" role="search">

                            <div class="form-group-group">
                                <div class="input-group" style="width: 220px;">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button"><b class = "glyphicon glyphicon-search"></b></button>
                                    </span>
                                </div>
                            </div> <!-- END form group div -->

                        </form> <!-- END search bar form -->

                    </li>
                </ul> <!-- END navbar list -->

            </div> <!-- END navbar collapse div -->

            </div> <!-- END .navbar-header div -->

        </div> <!-- END container div -->

    </div> <!-- END navbar div -->

    <!-- END ALL NAVBAR CONTENT -->

Answer 1

首先，您需要将<div class = "collapse navbar-collapse navHeaderCollapse">移到<div class=".navbar-header">之外。

<div class = "navbar navbar-default navbar-static-top"> 
    <div class = "container">
        <div class=".navbar-header">
           ...
        </div>
        <div class = "collapse navbar-collapse navHeaderCollapse">
           ...
        </div>
    </div>
</div>

然后，添加一些代码以使链接居中，但仅在导航栏折叠时...

@media (max-width: 768px){
  .navbar-nav li{
    text-align: center;
  }
}

折叠时Bootstrap 3 Navbar链接在品牌下

1 个答案: