bootstrap 3折叠按钮在徽标侧(不在徽标下方)显示内容

时间:2018-08-07 21:58:35

标签: css html5

单击“汉堡包”按钮时,drowpdown菜单将出现在徽标的侧面。我希望单击按钮时,下拉导航栏显示在徽标下方。

<body><!--bootstrap 3, customising bootstrap,--> <!--degracing down graceful degradation (RWD) instead of progressive enhancement  -->


    <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">

                    <a class="navbar-brand" href="#" >TechTech</a>
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeader">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                    </button>

                    <div class="collapse navbar-collapse navHeader">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>

                        </ul>

                    </div>
            </div><!--container-->
    </div><!--navbar-inverse-->

我在页面上添加了自定义CSS,并在与媒体查询合拢时定位了导航。

@media screen and (max-width: 992px) {
   body {
      background-color: blue;

}

0 个答案:

没有答案