Twitter Bootstrap - 向左/向右滑动 Span答案

【问题标题】：Twitter Bootstrap - slide a Span left/rightTwitter Bootstrap - 向左/向右滑动 Span
【发布时间】：2012-12-17 07:40:55
【问题描述】：

我正在使用 twitter bootstrap spans 在网格布局中形成两列。我想让用户关闭最左边的跨度，以便右跨度填充视口。我通过隐藏左侧面板并更改右侧面板的宽度来完成此操作，并且效果很好。但是，我更喜欢关闭左面板滑动并更改右面板宽度以填充剩余空间。到目前为止，我想出的最好的是：

if ( show )
    $('.content-panel').css( { width: '76.6%' } );

$('.left-panel').animate( {width: 'toggle'}, function(){
    if ( !show )
        $('.content-panel').css( { width: '100%' } );
});

其中 .content 面板是右侧列。这种工作，但看起来很笨重。它确实需要两个跨度一起调整大小。欢迎提出任何建议。

【问题讨论】：

澄清一下，这两列（您要操作的）是否位于单独的 Bootstrap 列中？
大卫，是的。我有：

span3 列是我要滑动的左列关闭。
nevf - 我猜你的意思是从
开始，所以它是<div class="row"><div class="span3"></div> <div class="span9"></div></div>

标签： twitter-bootstrap grid collapse

【解决方案1】：

为了好玩，我破解了 Voodoo 的示例并使用 Javascript 来操作类，然后使用 CSS 过渡来管理动画： http://jsfiddle.net/WDV69/29/

不一定是更好的解决方案，只是不同。

抱歉，如果我的 javascript 有点粗糙，那不是我的部门。

$("#closeTrigger").click(function() {

$('.container').removeClass('openLeft').addClass('closeLeft');  
});

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});

【讨论】：

大卫，非常感谢，效果很好。我不得不做一些调整，但一切都很好。对按钮使用 .closeLeft/.openLeft 以及 .container 会引起一些最初的头疼。
我很高兴这对您有所帮助。如果需要，您可以通过使用 @media 请求来调整宽屏和窄屏上的流体网格上的行为
我正在使用流体网格 - 你能解释一下吗？ @媒体请求
干净多了@DavidTaiaroa，干得好。注意 -- CSS3 动画在 IE9 及更低版本中不起作用，但回退在 IE 中似乎可以正常工作。
@nevf 重新媒体请求。引导网格根据访问者浏览器窗口的宽度而变化。 BS 通过指定某些 CSS 属性来做到这一点，这些属性仅通过使用 [at] 媒体请求在特定浏览器窗口宽度下激活。如果你查看 BS CSS 文件，你会看到像 [at]media (max-width: 767px) { something for tablet here } 这样的条目。有机会我会给你举个例子。

【解决方案2】：

这是一个似乎可以完成您想要的快速解决方案。见the fiddle here。

它从宽度的 Bootstrap 跨度类开始，然后在单击时动画右框宽度的扩展，同时减小左框的大小，然后将其完全隐藏。动画完成后，我修改了添加 span12。

$("#moveTrigger").click(function() {
  // Left box animates to 0 width
  $(".leftbox").animate({ "width": "0%" }, "slow", function() {
    // Hide when width animation finishes
    $(this).hide();
  });
  // Right box expands. Tinkered with add span12 after animation is complete
  $(".rightbox").animate({ "width": "90%" }, "slow", function() {
    $(this).removeClass('span6').addClass('span12').css('width','');
  });
});

这可能需要一些改进，但可以达到效果。

【讨论】：

@voodoo - 谢谢，这很有帮助，但是动画很慢而且看起来很糟糕，并且右框的大小无法正确调整，我无法解决。 David 的代码运行良好，非常棒。

【解决方案3】：

根据要求，另一种响应式解决方案：
http://jsfiddle.net/panchroma/pwP5V/

这又是基于@Voodo 启动的javascript

它使用媒体请求来管理动画，所以如果你查看 CSS，你会看到一堆设置，比如

@media (max-width: 480px) {
.to-hide {
background-color: yellow;  
}
....
}

它仍然需要一些微调，但我认为此时您需要使用现实生活中的内容，因为某些设置可能取决于左右栏的相对高度。

您可以进行无止境的定制。例如检查关闭在最窄窗口的工作方式。还可以针对打开和关闭以及不同的窗口大小自定义转换时间。

这里应该足够让你坚持一段时间了！

【讨论】：