twitter引导程序崩溃 - 仅在桌面上可见

我正在开发一个项目，我们正在使用twitter引导程序。有一个侧边栏，我已经设置了一个隐藏在桌面上的折叠按钮，并在任何其他较小的分辨率上可见。我想设置它，以便崩溃在桌面上打开并关闭任何其他时间。代码如下所示：twitter引导程序崩溃 - 仅在桌面上可见

<p class="lead visible-desktop"><i class="icon-search"></i> Quick Search</p> 
    <button type="button" class="btn hidden-desktop" data-toggle="collapse" data-target="#quicksearch"><i class="icon-search"></i> Quick Search</button> 
    <div id="quicksearch" class="in"> 
      some content here... 
    </div>

有人能让我走向正确的方向吗？

来源

2013-07-23 TEN Design

你应该看看了CSS媒体查询。下面是一个可以帮助你开始的例子：http://stackoverflow.com/questions/11796297/div-show-hide-media-query –

这个问题不仅在Bootstrap文档中有很好的记录，而且很容易在Google找到。答案也是不正确的。 –

它有据可查？请提供链接，代码或删除您的投票。在我自己创建一个解决方案之前，我花了两个晚上的更多时间寻找解决方案。它一定不是那么好记录的。是的，bootstrap文档提供了关于如何将崩溃状态设置为“in”或“out”的文档，但bootstrap不提供根据加载时的屏幕宽度或调整大小而不重复代码来动态更改输入/输出状态的选项。这正是我需要做的，这是正确的解决方案。显然你没有正确解释我的问题。 –

万一别人看起来这一点，这是我做了什么....

jQuery的解决方案：

这个代码

<div id="quicksearch" class="in"> 
     some content here... 
</div>

更改为使默认显示与div展开

<div id="quicksearch"> 
     some content here... 
</div>

并添加此脚本，以便赢得道指大小加载或低于765px（白手起家手机宽度）调整到类“崩溃了”翻转这当然倒塌股利

var toggleBlock = function() { 
    var windowsize = $(window).width(), 
     isDesktop = windowsize > 765; 
    $("#quicksearch").toggleClass("collapse out", !isDesktop); 
} 

$(document).ready(toggleBlock); 
$(window).on("resize.showContent", toggleBlock); 
toggleBlock();

来源

2013-07-25 01:16:16

twitter引导程序崩溃 - 仅在桌面上可见

回答

相关问题