相关疑难解决方法(0)

不使用LESS更改引导程序导航栏折叠断点

目前,当浏览器宽度降至768px以下时,导航栏将更改为折叠模式.我想将此宽度更改为1000px,因此当浏览器低于1000px时,导航栏将更改为折叠模式.我想在不使用LESS的情况下这样做,我使用手写笔不是很少.

我的问题与此问题相同:Bootstrap 3 Navbar Collapse

但是这些问题的所有答案都解释了如何通过改变LESS变量来做到这一点.我没有处理过LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成.

谢谢!

css collapse navbar responsive-design twitter-bootstrap

199
推荐指数
9
解决办法
33万
查看次数

在Bootstrap 3.0中更改折叠断点

当我的导航栏被折叠或者有任何方法让它像小尺寸一样响应时,请帮我改变!

这是我的代码:

    <div style="background-color:#e2e2e2; padding-bottom:10px;">
    </div>

    <div class="container">
        <div class="col-lg-10 col-lg-push-1 onhover">
            <nav class="navbar-default custom-nav" role="navigation">   
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="nav-collapse1" style="padding:0px;">                    
                    <ul class="nav nav-pills onhover">
                        <li class="active"><a class="onhover1" href="#">Home</a></li>
                        <li><a class="onhover1" href="#">Rooms</a></li>
                        <li><a class="onhover1" href="#">Events</a></li>
                        <li><a class="onhover1" href="#">Restraunts</a></li>
                        <li><a class="onhover1" href="#">Gallery</a></li>
                        <li><a class="onhover1" href="#">Services</a></li>
                        <li><a class="onhover1" href="#">About</a></li>
                        <li><a class="onhover1" href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap twitter-bootstrap-3

9
推荐指数
1
解决办法
6万
查看次数

使Bootstrap 3.0 NavBar内容始终崩溃

我需要让Bootstrap 3.0 NavBar的一部分总是崩溃.

导航栏的实际部分:

  • 链接
  • 搜索表格
  • 登录表格

当我在手机中打开网站时,我看到三个部分已折叠,我有三个图标可以折叠每个内容.

当我在PC中打开页面时,我看到栏中的三个部分可见(不是要折叠的按钮).我需要的?在PC视图中,只隐藏登录表单并显示折叠该登录表单的按钮.无论分辨率如何,我都需要让登录按钮始终可见,并且该部分已折叠.这是我的实际代码:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <!--Toggles -->
        <button type="button" class="navbar-toggle boton" 
                data-toggle="collapse" data-target="#sesion">
            <span class="glyphicon glyphicon-user"></span>
        </button>
        <button type="button" class="navbar-toggle boton"
                data-toggle="collapse" data-target="#links" id="menuToggle">
            <span class="glyphicon glyphicon-align-justify"></span>
        </button>
        <button type="button" class="navbar-toggle boton" 
                data-toggle="collapse" data-target="#buscar">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <!--Logo en vista Mobile -->
        <a class="navbar-brand" style="padding: 10px 0 0 15px" href="#">
            <span class="visible-xs">
                <img src="img/nsnow.png" width="37" height="36" alt="Logo" />
            </span>
        </a>
    </div>

    <ul class="collapse navbar-collapse nav navbar-nav" id="links">
        <!--Links --> …
Run Code Online (Sandbox Code Playgroud)

toggle collapse navbar twitter-bootstrap

6
推荐指数
2
解决办法
2万
查看次数