在 Bootstrap 中动态重新排列面板位置

Question

在 Bootstrap 中动态重新排列面板位置

3

这个 Bootstrap 技巧可以这样描述。假设我们有两行包含多个面板的内容。当一个面板被关闭时，我希望相邻的面板会自动填补前一个面板所占用的空间。例如：如果左侧的面板被关闭，右侧的面板就会向左移动。这有点像 iPhone 上的情况，当一个应用程序图标被关闭时，其余的图标会重新排列。我已经在互联网上搜索了一段时间，但没有成功找到相关信息。

仅供参考，我的当前布局的一部分如下：

<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>

- X...

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Carol Skelly · Accepted Answer

使用jQuery在面板被关闭时移除父级col-*。

$('.close').click(function(e){
   e.stopPropagation();  
   var $target = $(this).parents('.col-sm-3');
   $target.hide('slow', function(){ $target.remove(); });
});

http://www.codeply.com/go/eWpdCAJsHr

动态创建列的示例..

http://www.codeply.com/go/pUN5oATSFb