Question

更改@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>

Answer 1

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

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

Answer 2

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

请给我一些代码，以便我可以提供更多帮助：）

Answer 3

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

有效的解决方案是进入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

Answer 4

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

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

第940行：@media（最大宽度：979px）{

第1091行：@media（min-width：980px）{

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

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

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

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

4 个答案: