Question

我有一个带Bootstrap 3的网页。在这个网页中，我有一个row。在那一行中，我总是希望展示三个项目。但是，我真的有10个项目。

当用户点击＆＃34;删除＆＃34;按钮，我想删除一个项目，并使下一个项目滑入。但是，我一直无法弄清楚如何在Bootstrap row的上下文中执行此操作。目前，我的项目布局如下：

<div class="row">
  <div class="col-xs-4">
    <div id="panel1" class="panel panel-default">
      <div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
      <div class="panel-body">
        Item #1 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel2" class="panel panel-default">
      <div class="panel-heading" style="background-color:#249B73;">Item #2</div>
      <div class="panel-body">
        Item #2 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel3" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
      <div class="panel-body">
        Item #3 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel4" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
      <div class="panel-body">
        Item #4 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel5" class="panel panel-default">
      <div class="panel-heading" style="background-color:#F91721;">Item #5</div>
      <div class="panel-body">
        Item #5 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel6" class="panel panel-default">
      <div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
      <div class="panel-body">
        Item #6 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel7" class="panel panel-default">
      <div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
      <div class="panel-body">
        Item #7 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel8" class="panel panel-default">
      <div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
      <div class="panel-body">
        Item #8 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel9" class="panel panel-default">
      <div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
      <div class="panel-body">
        Item #9 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel10" class="panel panel-default">
      <div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
      <div class="panel-body">
        Item #10 Details
      </div>
    </div>  
  </div>
</div>

<div class="row">
  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeFirst()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeSecond()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeThird()">
    Remove This
    </button>
  </div>
</div>

要管理项目的状态，我有以下JavaScript：

var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function removeFirst() {
  var panelId = '#panel' + visiblePanels[0];
  $(panelId).fadeOut({
    duration:500
  });
  visiblePanels.splice(0, 1);
}

function removeSecond() {
  var panelId = '#panel' + visiblePanels[1];
  $(panelId).fadeOut({
    duration:500
  });
  visiblePanels.splice(1, 1);
}

function removeThird() {
  var panelId = '#panel' + visiblePanels[2];
  $(panelId).fadeOut({
    duration:500
  });
  visiblePanels.splice(2, 1);
}

问题是，当项目被移除时，我无法将项目向左滑动。此外，项目换行而不是仅隐藏在第一行之外。我创建了一个小提琴here来显示正在运行的代码。

Answer 1

添加parent（）方法以隐藏整个Bootstrap列

$(panelId).parent().fadeOut({
   duration:500
});

Demo 1

要获取要隐藏的项的额外伪行，您可能必须设置最大高度并隐藏父行上的溢出：

.row.some-class {
    max-height: 110px;
    overflow: hidden;
}

Demo 2

这里的缺点是你必须拥有永不改变高度的物品，并且你必须使用媒体查询来解决因文字包装等原因而导致高度变化的情况。你可能最好使用一个相反，许多jQuery滑块。

Answer 2

你需要在另一个答案中提到fadeOut一个父（）。此外，您还需要添加一个包装<div class="frm">以对齐对齐框的水平滚动。这个div专门用于与水平对齐的一组盒子一样宽。我用隐藏重复了fadeOut - 它看起来好多了。 .row还有其他css属性：

.row {
  overflow:hidden;
  height: auto;
}

这是片段

＆＃13;

var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$(".frm").width($(".row").width()*visiblePanels.length/2.5);
$(".frm > div").width($(".row").width()/3.4);
$(window).resize(function(){
$(".frm > div").width($(".row").width()/3.4);});

function removeFirst() {
  var panelId = '#panel' + visiblePanels[0];
  $(panelId).parent().hide({
    duration:500
  });
  visiblePanels.splice(0, 1);

}

function removeSecond() {
  var panelId = '#panel' + visiblePanels[1];
  $(panelId).parent().hide({
    duration:500
  });
  visiblePanels.splice(1,1);
}

function removeThird() {
  var panelId = '#panel' + visiblePanels[2];
  $(panelId).parent().hide({
    duration:500
  });
  visiblePanels.splice(2,1);
}

＆＃13;

.row {
  overflow:hidden;
  height: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="frm">
  <div class="col-xs-4">
    <div id="panel1" class="panel panel-default">
      <div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
      <div class="panel-body">
        Item #1 Details 
      </div>
    </div>  
  </div>
  
  <div class="col-xs-4">
    <div id="panel2" class="panel panel-default">
      <div class="panel-heading" style="background-color:#249B73;">Item #2</div>
      <div class="panel-body">
        Item #2 Details
      </div>
    </div>  
  </div>
  
  <div class="col-xs-4">
    <div id="panel3" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
      <div class="panel-body">
        Item #3 Details
      </div>
    </div>  
  </div>
  
  <div class="col-xs-4">
    <div id="panel4" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
      <div class="panel-body">
        Item #4 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel5" class="panel panel-default">
      <div class="panel-heading" style="background-color:#F91721;">Item #5</div>
      <div class="panel-body">
        Item #5 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel6" class="panel panel-default">
      <div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
      <div class="panel-body">
        Item #6 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel7" class="panel panel-default">
      <div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
      <div class="panel-body">
        Item #7 Details
      </div>
    </div>  
  </div>
  
  <div class="col-xs-4">
    <div id="panel8" class="panel panel-default">
      <div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
      <div class="panel-body">
        Item #8 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel9" class="panel panel-default">
      <div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
      <div class="panel-body">
        Item #9 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel10" class="panel panel-default">
      <div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
      <div class="panel-body">
        Item #10 Details
      </div>
    </div>  
  </div>
</div>
  </div>

<div class="row">
  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeFirst()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeSecond()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeThird()">
    Remove This
    </button>
  </div>
</div>

＆＃13;

如何动态删除Bootstrap网格中的列？

2 个答案: