【问题标题】:How to make the Bootstrap Navbar stay collapsed [closed]如何使 Bootstrap Navbar 保持折叠状态 [关闭]
【发布时间】:2014-09-08 16:56:48
【问题描述】:

我正在使用基于 twitter 引导程序的 customizr wordpress theme 设置网站,并希望导航栏始终出现在折叠布局中,以便菜单项仅通过单击 navbar-toggle 按钮可见(三个水平线)。

我相信我必须修改 CSS 的 @media 最小和最大宽度,但不能正常工作。

简单来说,我希望它在我的桌面上的显示方式与在移动设备上的显示方式相同。

【问题讨论】:

    标签: html css wordpress twitter-bootstrap


    【解决方案1】:

    always-open 类添加到导航栏,然后使用以下 CSS:

    .navbar.always-open {
        border-radius: 0;
    }
    .navbar.always-open .navbar-header {
      float: none;
    }
    .navbar.always-open .navbar-toggle {
      display: block;
    }
    .navbar.always-open .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar.always-open .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar.always-open .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
    }
    .navbar.always-open .navbar-nav>li {
      float: none;
    }
    .navbar.always-open .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    

    示例 HTML:

    <nav class="navbar navbar-inverse always-open">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>
    

    Demo in fiddle

    截图

    *Adapted from this bootply

    顺便说一句,如果您要使用 less 构建自己的 Bootstrap 版本:
    你可以alter the @grid-float-breakpoint from @screen-sm-min to 999999999px

    【讨论】:

    • 既然我用 wordpress(customizr 主题)来构建网站,我还会采用您概述的方法吗?
    • @user3501476,可能
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-24
    相关资源
    最近更新 更多