带有目标的引导响应列

Posted 2023-03-21

【中文标题】带有目标的引导响应列

【英文标题】：Boostrap Responsive columns with target

【发布时间】：2021-09-02 11:17:43

【问题描述】：

我想要一个包含几行的表格，根据屏幕大小占用更多或更少的空间。 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

【问题讨论】：

尝试使用您的代码创建一个代码 sn-p。之后，有人可以提供帮助。

所以你想要当绿色列折叠时下面的红色列不与第一列一起上升？

【参考方案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);

【讨论】：

是的；但是例如，附加的孩子只会与父母（col-3）一样宽，因此它不会占用我希望它拥有的整个空间。

这是真的，我添加了我的第一个建议的示例，这样您就可以将您的 <div class="col-12 bg-success"> 插入到现有 div 在父元素之外。