如何動態刪除Bootstrap網格中的列？

Question

我有一個帶有Bootstrap 3的網頁。在此網頁中，我有row 。 在那一行中，我總是想顯示三個項目。 但是，我確實有10件物品。

當用戶單擊“刪除”按鈕時，我要刪除一個項目，然后放入下一張幻燈片。但是，我一直無法弄清楚如何在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);
}

問題是，刪除項目后，我無法使項目向左滑動。 此外，這些項目可以包裝，而不僅僅是隱藏在第一行之外。 我在這里創建了一個小提琴以顯示代碼正在運行。

Answer 1

添加parent（）方法以隱藏整個Bootstrap列

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

演示1

為了使項目的額外偽行被隱藏，您可能必須設置最大高度並在父行上隱藏溢出：

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

演示2

這里的缺點是您必須擁有永遠不會改變高度的項目，並且必須使用媒體查詢來解決由於文本換行等導致高度發生變化的情況。使用其中一種可能會更好改為使用jQuery滑塊。

Answer 2

您需要按其他答案中所述淡出parent（）。 另外，您還需要添加一個環繞式<div class="frm">用於水平滾動對齊框。 該div致力於與水平對齊的盒子一樣寬。 我用皮革重新填充了淡出-看起來好多了。 .row還有其他的CSS屬性：

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

這是片段

 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); } 

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

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