带有目标的引导响应列

Question

我想要一个包含几行的表格，根据屏幕大小占用更多或更少的空间。 3 个元素用于大屏幕，4 个用于中屏幕，2 个用于小屏幕。

我使用下面显示的代码实现了这一点：

<div class=row>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
</div>

但是，我需要每个元素以另一个 div 为目标，这将是可折叠的并且需要填充整个列 (.col-12)。如果 3 个元素在同一行，我需要 3 个 div 来定位并将它们显示在绿色区域中。但在中型屏幕上，我需要在绿色区域放置 4 个，而在小屏幕上只需要 2 个。

我对我的意思做了一个小草图：

问题是当我将一个元素放在我的 col-* div 下时，其他列将移到这些元素下方。

    <div class=row>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          <p>MY ELEMENT</p>
        </div>
        <div class="col-12 collapse bg-success" id="collapseExample" >
          <p>COLAPSE ELEMENT</p>
      </div>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
          <p>MY ELEMENT</p>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
          <p>MY ELEMENT</p>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
          <p>MY ELEMENT</p>
        </div>
    </div>

如何在没有其他列的情况下显示我的绿色 div？

Code snippet

Answer 1

我建议您尝试创建一个 JS 函数来执行此操作。 您可以使用 Javascipt 函数添加和删除元素：.append() 或 .appendChild() 和 .remove()。

您可以尝试多种不同的方式来执行解决方案：

• 创建一个空的<div>并使用.append()将你的完整col-12 bg-success添加到元素中（记得在动态添加的时候给col添加一个id，使用时你需要这个来再次获取它.remove()
• appendChild() 方法允许您将节点添加到指定父节点的子节点列表的末尾，在您的情况下为 bg-danger-divs。

我希望这可以帮助您继续。当您再次遇到麻烦时，请告诉我是否可以提供任何帮助。

编辑：

第一个建议示例：

<div class=row>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger" href="#collapseExample" role="button" aria-expanded="false">
      <p>MY ELEMENT</p>
   </div>
   <div id="collapseExample">
      {{--new col-12--}}
   </div>
  ...
</div>

let div = document.createElement("div");
    div.addClass("col-12");
    div.addClass("bg-success");
    div.setAttribute("id", "collapseChild");
    div.innerHTML('<p>COLLAPSE ELEMENT</p>');
    document.getElementById("collapseExample").append(div);