相关疑难解决方法(0)

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

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

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

谢谢!

我在Rails 3.1.2项目中使用Twitter Bootstrap 2.0.1,使用bootstrap-sass实现.我正在加载文件bootstrap.css和bootstrap-responsive.css文件,以及bootstrap-collapse.jsJavascript.

我有一个带有类似示例的导航栏的流畅布局.这遵循此处的导航栏"响应变化"说明.它工作正常:如果页面比约940px窄,导航栏会折叠并显示一个"按钮",我可以单击该按钮进行展开.

然而,我的导航栏看起来很好,大约550px宽,即它不需要折叠,除非屏幕非常窄.

如果屏幕宽度小于550px,我如何告诉Bootstrap仅折叠导航栏？

请注意,在这一点上我不希望修改其它响应行为,如堆叠的元素,而不是并排显示他们一边.

这是我简单的导航栏:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

我只是想防止这种崩溃,因为我不需要它,该怎么办？

我想避免编写300K行的CSS来覆盖默认样式.

有什么建议吗？

我的Bootstrap 3导航栏在大视口上是1行.然后,当我开始收缩浏览器窗口时,它会切换到2行,其中右侧内容("Hello username","Log off")位于第二行.

然后在更多调整大小后,它再次变为1行,菜单项消失,菜单按钮仅出现.

我如何跳过2行阶段？

我正在使用Bootstrap v3.

我有导航栏类,所以当我的屏幕移动大小导航崩溃并出现小网格状切换按钮 - 所以这是按预期工作.

我想要的是,这是所有屏幕尺寸的默认操作.也就是说,即使在桌面上,我也希望折叠导航并切换按钮.

我已经浏览了一下css,并且有很多东西提供了功能,但我不知道要改变哪些部分.

我已经尝试过评论更大的媒体查询,虽然它们有很多,但它似乎对其他样式产生了连锁反应.

有任何想法吗？

我知道你可以在"variables.less"文件中更改@ grid-float-breakpoint,它编译成我们都下载和使用的bootstrap包(我认为).

bootstrap/
??? css/
?   ??? bootstrap.css
?   ??? bootstrap.min.css
?   ??? bootstrap-theme.css
?   ??? bootstrap-theme.min.css
??? js/
?   ??? bootstrap.js
?   ??? bootstrap.min.js
??? fonts/
    ??? glyphicons-halflings-regular.eot
    ??? glyphicons-halflings-regular.svg
    ??? glyphicons-halflings-regular.ttf
    ??? glyphicons-halflings-regular.woff

我的问题是,如果不自定义新的引导程序包,可以更改@ grid-float-breakpoint,而是使用@media或其他方法通过CSS更改它.如果可能,请建议在何处以及如何执行此操作的方法.谢谢

我正在使用bootstrap 3.0并在移动网站上工作.我正在尝试弄清楚如何在查看平板电脑设备(小型/ SM设备)上显示和激活导航栏切换,因为导航栏折叠仅适用于超小型设备.使用bootstrap 2时没有问题

继承我的代码

<nav class="navbar navbar-inverse navbar-default-top" role="navigation" style="border:0px; background:#F26522;" align="center">

    <div class="col-lg-3  col-md-3 col-sm-12" style="background-color:#fff; height:192px;" align="center" > 

<div class="hidden-xs hidden-sm"></div><a  href="#"><img src="logo_png.png"   class="img-responsive" ></a></td>
   </div>


    <div class="col-lg-9 col-md-9 col-sm-12"">
      <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-12">
          <button type="button" class="navbar-toggle pull-left hidden-md hidden-lg" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only ">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 

          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-left navr">
              <li class="navrli"><a href="#" id="nav-0">ABOUT</a> </li>

            </ul>
          </div>
        </div>
        <div class="col-lg-1 col-md-1 hidden-sm" align="right"> …

我正在使用Twitter bootstrap整理一个粗略的导航栏.

有一个断点,设备的宽度将导致导航栏项目折叠并显示菜单按钮:

如何更改断点以使导航栏更快崩溃？目前,当它出现在徽标上时,它能够突破到一条新线,这看起来并不太好:

我在这里尝试了一个详细的解决方案,但它似乎打破了折叠的菜单(之后无法再次展开).

这是html:

    <!-- navigation -->
    <div class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">

                <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="#"><img class="ManeEventLogo" src="/img/ManeEventLogoWhite-Sm.png"></a>
            </div>

            <div class="collapse navbar-collapse navbar-responsive-collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/index.php">HOME</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SERVICES <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/services/cutting-styling/index.php">Cutting & Styling</a></li>
                                <li><a href="/services/coloring/index.php">Coloring</a></li>                                
                                <li><a href="/services/hair-straightening-relaxing/index.php">Permanent Hair Straightening & Relaxing</a></li>
                                <li><a href="/services/balmain-hair-extensions/index.php">Balmain Hair Extensions</a></li>
                            </ul>
                    <li>
                        <a …

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

这是我的代码:

    <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>

有没有办法改变Bootstrap菜单响应和崩溃的断点？979px对我来说太大了,我希望只在较小的尺寸上进行转换.