javascript - 如何在 Bootstrap 中动态更改布局？

Question

假设我有一个布局流畅的网格。它在一个 div 中有一个组件，一个表格span12- 使用整个屏幕。

单击此表中的一行时，我想更改布局。我想将表格的 div 更改为并在右侧span4创建一个新列以显示所选项目的详细信息。span8

如何以编程方式执行此操作？像这样简单的东西：

$("#mydiv").removeClass("span12").addClass("span4")

...似乎不起作用，我相信我需要以某种方式告诉 Bootstrap 重新处理整个布局。有可能吗？

Answer 1

这个解决方案怎么样：

var $table = $('.table-container'), // table inside
    $side  = $('.side-container');  // hidden by default
$table.on('click', 'tr', function() {
   $table.removeClass('span8').addClass('span4');
   $side.show();
});

http://jsfiddle.net/meV43/

我在这个演示中使用了 span8 的总宽度

具有切换列功能http://jsfiddle.net/meV43/1/