11

使用户能够动态更改 Twitter Bootstrap 样式页面的列宽的最佳方法是什么？

例如，在以下示例中添加垂直分隔器/分割器？

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6 resizeMe">Left</div>
        <div class="span6 resizeMe">Right</div>
    </div>
</div>
4

3 回答 3

2

如果您不介意它不是动画或动态可调的，这是我一直在使用 Bootstrap 进行的与此类似的工作（我使用的是 2.1.0，但这应该适用于任何 2.x 版本）：

设置按钮组：

<div class="btn-group">
        <a href="##" rel="tooltip" title="Make the Directories side dominant" class="btn btn-mini" data-action="dirDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
        <a href="##" rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
        <a href="##" rel="tooltip" title="Make the Documents side dominant" class="btn btn-mini" data-placement="left" data-action="fileDom"><i class="icon icon-indent-right"></i></a>
        </div>

现在，这是 JQuery 的魔力：

$(function(){
$('a[data-action="dirDom"]').click(function (){
    $("#dirList").css('display','inline').removeAttr('class').addClass("span12");
    $("#fileList").removeAttr('class').css("display","none");

});
$('a[data-action="equality"]').click(function (){
    $("#dirList").css('display','inline').removeAttr('class').addClass("span6");
    $("#fileList").css('display','inline').removeAttr('class').addClass("span6");
});
$('a[data-action="fileDom"]').click(function (){
    $("#fileList").css('display','inline').removeAttr('class').addClass("span12");
    $("#dirList").removeAttr('class').css("display","none");
});

});

我一直在尝试对其进行动画处理，但运气不佳，但这可以使一个尺寸完全可见，然后左侧完全可见，最后回到相同的尺寸。我确信可以编写更好的 JQuery，但是嘿，这是初稿；）

于 2012-11-12T23:10:14.167 回答
1

我不相信目前有一种引导方式，但是您可以将一个类添加到您的一个放置border-left:1px solid #EEE或border-right:1px solid #EEE. 此解决方案的唯一问题是您的 12 组合跨度现在将比正常 span12 宽度多 1px，并且它将其中一个 div 推到下一行。如果可以这样做，您可以通过使第二个 div 仅 span5 来解决此问题，因此您的总数为 span11 + 1px。

如果 bootstrap 有一个不会干扰正常网格系统的类，那就太好了。

于 2012-08-30T18:25:00.593 回答
0

如果要创建可以通过拖动来调整大小的左侧菜单栏，jsplitter 可能是一个不错的选择 - https://jsplitter.dilif.com/p/jsplitter/

实时示例 - https://jsplitter.dilif.com/p/jsplitter/doc/3/3/working-examples/

它有两个选择 -

  • 第一个适用于放置在弹性框中的 div
  • 第二个适用于将左侧定位为“位置：固定；宽度：X；”的 div 右边一个为“margin-left：X”。这是在大多数网站中添加侧边菜单的方式。
于 2020-11-19T01:55:52.063 回答