Question

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

单击此表中的行时，我想更改布局。我想将表格的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/

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

1 个答案: