Bootstrap 3 - 折叠时自定义导航栏相对于品牌/徽标的位置答案

【问题标题】：Bootstrap 3 - Customizing the position of navbar relative to brand/logo when collapsedBootstrap 3 - 折叠时自定义导航栏相对于品牌/徽标的位置
【发布时间】：2015-01-10 16:29:05
【问题描述】：

所以我已经开始构建我的第一个网站，并且正在试用 Bootstrap 3 框架。

我选择的导航栏设置为响应屏幕大小，因此最终它会折叠成一个小按钮，以便在平板电脑和移动设备上使用。

我不太喜欢折叠导航栏项目的默认位置；当我希望它们从徽标下方开始时，它们会立即出现在徽标旁边。 IE。在此屏幕截图中的蓝色虚线区域：

屏幕宽度越窄，问题越大：

导航栏以 767px 的宽度折叠；我在引导 css 周围戳了一下，注意到有一堆 @media 查询，但不确定哪个对我有帮助，我也不确定如何让导航栏项目下降到徽标下方它倒塌了。

到目前为止，这是我的 html 导航部分（显然 css / js 是从引导文件中提取的）。

<header>

    <!-- navigation -->
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>

            <div class="collapse navbar-collapse navbar-responsive-collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">HOME</a></li>
                    <li><a href="#">PAGE 1</a></li>
                    <li><a href="#">PAGE 2</a></li>
                    <li><a href="#">PAGE 3</a></li>
                    <li><a href="#">PAGE 4</a></li>
                    <li><a href="#">PAGE 5</a></li>
                </ul>

            </div>
        </div>
    </div>

</header>

【问题讨论】：

您的代码在jsfiddle 中运行良好。您需要发布更多代码或使用您的代码制作一个 jsfiddle，因为似乎其他东西正在影响您的导航。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我在 jfiddle 上使用您的代码时遇到了同样的问题。您的某些代码已关闭。 Bootstrap，默认情况下应该做你想做的事——折叠的应该在标志下面。

您刚刚离开了按钮和品牌周围的 navbar-header div.. 见下文：

<header>

<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
    <div class="container">

     <div class="navbar-header"><!-- navbar-header should go here -->

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>

        </div><!--header should end here -->

       <div class="collapse navbar-collapse navbar-responsive-collapse">

            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">PAGE 1</a></li>
                <li><a href="#">PAGE 2</a></li>
                <li><a href="#">PAGE 3</a></li>
                <li><a href="#">PAGE 4</a></li>
                <li><a href="#">PAGE 5</a></li>
            </ul>

        </div>
    </div>
</div>

【讨论】：