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

马特·霍尔

因此,我已经开始构建我的第一个网站,并且正在尝试Bootstrap 3框架。

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

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

桌子/手机的理想导航栏位置

屏幕宽度越窄,问题就越多:

在此处输入图片说明

导航栏以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>
大卫

在jfiddle上使用您的代码时,我遇到了同样的问题。您的某些代码已关闭。默认情况下,Bootstrap应该可以执行您想要的操作-折叠后的图像应位于徽标下方。

您刚刚离开了按钮和品牌周围的导航栏标题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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章