Twitter bootstrap 在引导中动态重新排列面板位置。
我正在寻找的这个引导技巧可以用以下措辞表达。假设我们有两行,其中包含几个面板。当一个面板关闭时,我希望看到相邻的面板自动填充上一个面板占用的空间。例如:如果左侧的面板被取消,则右侧的面板将移至左侧。这有点像在iPhone中,当一个应用程序图标被关闭时,其他应用程序图标会重新调整。我在网上搜索了一段时间,但没有成功 仅供参考,我当前布局的一部分如下所示:Twitter bootstrap 在引导中动态重新排列面板位置。,twitter-bootstrap,layout,Twitter Bootstrap,Layout,我正在寻找的这个引导技巧可以用以下措辞表达。假设我们有两行,其中包含几个面板。当一个面板关闭时,我希望看到相邻的面板自动填充上一个面板占用的空间。例如:如果左侧的面板被取消,则右侧的面板将移至左侧。这有点像在iPhone中,当一个应用程序图标被关闭时,其他应用程序图标会重新调整。我在网上搜索了一段时间,但没有成功 仅供参考,我当前布局的一部分如下所示: <div class="row"> <div class="panel-group" id="contentPanel
<div class="row">
<div class="panel-group" id="contentPanel">
<div class="col-sm-3 col-md-3" style="">
<div class="panel panel-info" id="indexPanel">
<div class="panel-heading">
<div class="panel-title">
<span id="indexPanelHeading">Panel 1</span>
<button type="button" class="close" data-target="#indexPanel" data-dismiss="alert">
<span class="pull-right clickable">
<i id="" class="glyphicon glyphicon-remove"></i>
</span>
</button>
</div>
</div> <!--end of panel-heading -->
<div class="panel-body">
<h4>Some texts </h4>
</div>
</div>
</div>
<!--another panel -->
<div class="col-sm-3 col-md-3" style="">
<div class="panel panel-info" id="indexPanel2">
<div class="panel-heading">
<div class="panel-title">
<span id="indexPanelHeading2">Panel 2</span>
<button type="button" class="close" data-target="#indexPanel2" data-dismiss="alert">
<span class="pull-right clickable">
<i id="" class="glyphicon glyphicon-remove"></i>
</span>
</button>
</div>
</div> <!--end of panel-heading -->
<div class="panel-body">
<h4>Some texts</h4>
</div>
</div>
</div>
</div>
</div>
小组1
一些文本
小组2
一些文本
当面板关闭时,使用jQuery删除父级col-*
$('.close').click(function(e){
e.stopPropagation();
var $target = $(this).parents('.col-sm-3');
$target.hide('slow', function(){ $target.remove(); });
});
具有动态创建的col.的示例
有趣的解决方案。我忘记指出的一点是,其中的面板是使用jQuery动态生成的。我想不会有什么不同。但不知何故,这种解决方案在这种环境下似乎有点尴尬。你是说它不能与动态创建的COL一起工作吗?或者你只是不喜欢这个解决方案?ZimSystem,请不要误会。我肯定喜欢这个解决方案,因为它适用于静态cols。但是它在某种程度上不适用于动态生成的col。好的,只需确保在动态col生成之后绑定
click
事件即可。我将用一个例子更新答案