更改Bootstrap流体布局导航栏折叠阈值

时间:2013-05-16 13:06:41

标签: twitter-bootstrap

更改@media(最大宽度:979px)和@media(最小宽度:980)的方法对我不起作用(我希望我的网站的导航栏以1024px折叠)。我搜遍了所有的方法。我甚至试图改变@media(最大宽度:767)及其768对,但它也不起作用(因为我的网站在那个宽度上崩溃,我认为这是平板电脑显示的默认崩溃阈值)。可能是什么问题呢?

我的导航栏属于导航栏类,其元素由左侧标记和

  • 组成,用于按钮。

    我也在开发中使用django。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <!--
        <link rel="stylesheet" type="text/css" href="/static/global.css">
        -->
        <link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
        <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
        <!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
        <link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">   
        <!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->      
        <link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
        <link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
        <!--[if lt IE 9]>
                <link href="css/ie.css" rel="stylesheet"/>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>      
                <script src="js/css3-mediaqueries.js"></script>
        <![endif]-->
    
    
    
    
            <script src="/static/bootstrap/js/modernizr.custom.js"></script>    
            <script src="/static/js/jquery-1.9.0.js"></script>
            <script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
            <script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
            <script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
            <script src="/static/highcharts-3/js/highcharts.js"></script>
            <script src="/static/bootstrap/js/bootstrap.min.js"></script>
            <script src="/static/bootstrap/js/superfish.js"></script>
    
        <title>CoAssets Platform (BETA)</title>
    </head>
    
    <body>
    
        <!--div class="container-fluid"-->
            <div class="row-fluid">
                <div class="span12" id="topmenu">
                {% block topmenu %}{% endblock %}
                </div>
            </div>
    
            <div class="row-fluid" style="background-color:#ffad37">
                <div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
                <ul class="nav nav-pills">          
                    {% block submenu %}{% endblock %}
                    <li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
                    <li class="pull-right"><a href="/account/">Account</a></li>
                </ul>
                </div>  
            </div>
        <!--/div-->
    
        <!--div class="container-fluid"-->
            <div class="row-fluid">
                <div class="span12" id="main">
                    {% block main_body %}{% endblock %}
                </div>
            </div> 
        <!--/div-->
        </br>
        <div class="container-fluid" id="copyright">    
            <div class="row-fluid">
                <div class="span4">
                    <p>Legalise</p>
                    <p>Contact Us</p>
                </div>
                <div class="span4">
                    <p>Partners</p>
                    <p>FAQ</p>
                    <p>Definitions</p>
                </div>
                <div class="span4">
                    <p><a  href="/util/">Admin</a></p>
                </div>
            </div>
            <div class="row-fluid" id="copyright">
                <div class="span12" id="footer">
                    <p>Copyright of CoAssets.com &copy; 2013</p>
                </div>
            </div>      
        </div>
    
    
    <script>
    //script conflicts with some other jQuery scripts, so need to handle this script
    jQuery.noConflict();
    $(document).ready(function($){  
        $('.nav li').each(function() {
            var currentPath = window.location.pathname;
            var thisPath = $(this).children().attr('href');
            //alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
            $(this).removeClass('active');
            if (thisPath == currentPath && !$(this).hasClass('active')) {
                $(this).addClass('active');
            };
        });
    
        $('#menu li').each(function() {
            var currentPath = window.location.pathname;
            var thisPath = $(this).children().attr('href');
            var len = thisPath.length;
            //alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
            $(this).removeClass('active');
            if (thisPath != '/' && thisPath == currentPath.substring(0,len) 
                                                        && !$(this).hasClass('active')) {
                $(this).addClass('active');
            } else if (thisPath=='/' && currentPath == '/')
            {
                $(this).addClass('active');
            };
        });
    });
    </script>
    
    
    </body>
    </html>
    
  • 4 个答案:

    答案 0 :(得分:2)

    您可以使用variables.less文件设置折叠宽度,也可以在下载Twitter引导程序的编译版本时在自定义页面上设置它。该变量称为“navbarCollapseWidth”。

    http://twitter.github.io/bootstrap/customize.html

    答案 1 :(得分:0)

    你是否插入了bootstrap-responsive.css?你在哪里放css代码?你应该在bootstrap-responsive.css中使用你的代码,或者你应该创建一个新的ccs,调用bootstrap-responsive.css然后你的更改可以生效

    请给我一些代码,以便我可以提供更多帮助:)

    答案 2 :(得分:0)

    我遇到的一个问题是,当我将浏览器的宽度缩短到中等大小的屏幕时,导航栏隐藏了我的主要内容。一个简单的解决方案就是改变我的导航栏标题的长度,即使它有效,它也阻止了我拥有我想要的标题。

    有效的解决方案是进入bootstrap.min.css文件,我进行了搜索(CTRL-F)以进行导航栏崩溃。我更改了以下代码:

    @media(min-width:768px){
    .container>.navbar-header,
    .container>.navbar-collapse
    {margin-right:0;margin-left:0}}  
    

    @media(min-width:1000px){
    .container>.navbar-header,
    .container>.navbar-collapse
    {margin-right:0;margin-left:0}}
    

    我不再遇到导航栏高度增加的问题。涵盖我的主要内容。

    以下是完整尺寸的页面:

    enter image description here

    以下是我的问题的截图: enter image description here

    这是在修复之后 enter image description here

    答案 3 :(得分:-1)

    我必须在bootstrap-responsive.css中更改两行(我正在使用Bootstrap 2.3并从纯粹的lazynsess中走出这条路线)

    请注意,由于我之前进行了一些编辑,因此行号可能略有偏差。

    第940行:@media(最大宽度:979px){

    第1091行:@media(min-width:980px){

    我希望我的导航栏能够“更快”地以1280的宽度折叠。我将最大宽度更改为1279,将最小宽度更改为1280.成功!

    (当我跟踪磨机运行时,我的导航栏自动“去折叠”问题'只需更改max-width变量')

    'pologies,没有jsfiddle(仍然是懒惰的),请亲自尝试,而不是在现场网站上。