折叠/不折叠时Bootstrap Navbar下拉样式

时间:2016-11-13 20:44:51

标签: html css twitter-bootstrap

初学者项目 - 我正在使用Bootstrap开展工作,并且大部分时间都在构建我的Navbar。当Navbar进入折叠模式时,我非常喜欢下拉菜单,我想一直这样。

我不能为我的生活找出什么甚至让它改变开始

左边是它在折叠时的样子,以及我希望如何随时拥有它(注意它如何自动将下拉列表集中在这里): django filter with list of values

我发现如果我调整了CSS以使页面始终处于折叠模式,那么下拉列表仍然具有2种样式,并且更改了折叠模式用于启动的位置

抱歉 - 这里的初学者,也是StackOver流程的新手,希望这对某人有意义:)干杯

<nav class="navbar-fixed-top navbar-default">
        <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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 cornerlogo" href="/">
                <img class="logo" alt="Brand" src="/img/Logo1.png">
            </a>
            <!--<p class="navbar-brand centerme">Current Client Name</p>-->
            <ul class="nav navbar-nav navbar-default centerme">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current Client Name <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-right scrollable-menu">
                        <li class="newclient"><a href="\NewClient.php">New Client</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">client1</a></li>
                        <li><a href="#">client2</a></li>
                        <li><a href="#">client3</a></li>
                    </ul>
                </li>
            </ul>
        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


            <!--******************php if statement here to check if client selected-->  
                <form class="navbar-form navbar-right">
                    <button type="submit" class="btn btn-default">New SABR</button>
                    <button type="submit" class="btn btn-default">Edit Client</button>
                <!--</form>-->
                <!--<form class="navbar-form navbar-right">-->

                </form>
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->

    </nav>

我不知道如何正确显示我的CSS,但不确定它的相关性,即使我在页面上禁用所有CSS行为是相同的

0 个答案:

没有答案