包含绝对定位元素的Bootstrap4列

Question

我一直在做一场比赛，在某些事情上，我使用了绝对的定位。特别是，我需要它的一些移动动画，我必须滑动元素，并重叠他们，以创造一个效果。

我正在努力使游戏好看的移动，我已经遇到了一些问题的启动columns，其中包含这些绝对定位的元素。

这就是我想要得到的外观(除了对齐不良的数字)，注意中间的红色平方行：

​

​

屏幕的整个中央部分(下面有按钮、表情符号和居中卡图标的行)是一个包含row的col。

<div class="col order-1 order-xl-1 col-4 col-xl-2">
    <div style="display:inline-block">
        <p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
        <p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
    </div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
    <span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
    <table>
        <!-- emojis ... -->
    </table> 
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
    <span>...</span><br />
    <span id="hidden_card">
        <img class="card_placeholder" src="..." />
    </span>
    <span id="card_stack" class="slide_to_right">
        <img class="card_placeholder" src="..." />
    </span>
    <div id="stacked_card"> 
      <img id="stacked_front" class="card_placeholder" src="..." />
    </div>
    <div id="hidden_uncovered_card_div">
        <img id="hidden_uncovered_card" class="card_placeholder" src="..." />
    </div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
        <button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" @click="doubt()" :disabled="playing_animation">Dubito!</button>
        <button style="width: 49%" class="btn btn-lg btn-dark">
            Metti giù
        </button>
    </div>
</div>

具有id hidden_card的hidden_card是红色hidden_card左边的一张卡，它可以显示，并向右滑动以覆盖这个位置(它使用jQuery animate来操作这个位置)。stacked_card是屏幕截图中显示的主要红牌，在它的顶部，还有另一张它的副本，它与jQuery一起翻转，然后移动到hidden_uncovered_card的右侧。这就是动画的工作原理。它们都依赖于使用position: absolute和操纵定位。

出于某些原因，我从上面的代码中得到的实际外观如下：

​

​

在顶部的三列和后面的红牌之间有一些空间，我不知道它是从哪里来的。删除所有的position: absolute似乎修复了这个问题，但是当然，所有依赖它的动画都停止工作了。

有没有任何方法可以在不删除position: absolute的情况下修复此定位？要重写所有动画的代码将是一件痛苦的事，因为它在桌面上完美地工作。

下面是包含标记的静态网页。您可以将其转换为移动视图(屏幕截图以iPhone 6/7/8模式拍摄)并自己查看。

点击

实际的应用程序(测试版，也就是)可以找到这里，以防你想看看动画是如何工作的。如果你需要更多的信息，就告诉我。

Answer 1

引导程序使用12列网格。

检查一下你是如何使用它们的。

你有：

<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>

你应该打扫干净！

示例：

• col后面跟着col-4与col-4一样，col-4覆盖col。
• 如果不存在order-1和order-xl-1 (例如)，则对order-md-3进行反驳(例如)。 只有order-1在这里。

对于这4个div，请确保正确使用这12个网格空间。

因此，关于col和col-*的使用，对于移动大小，实际上在12个空间中使用了24个空格。

1. 4个空间
2. 4个空间
3. 12个舱间
4. 4个空间

在col-xl-*应用程序中，12个空格中有10个是故意使用的吗？

1. 2个空间
2. 2个空间
3. 3个空间
4. 3个空间

以下是我建议的开始：

<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>

它根本不改变xl的大小，但会产生这样的结果(iphone 6/7/8模式)：

​

​

这是个开始。

所以诀窍是要把它们整理好.所有的col-*从默认到更大的特定尺寸.然后order-*也按顺序排列。使标记可读性的。

;)

编辑

让红牌看起来像在另一行上：

<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>

请注意顺序已更改，并且还有一个额外的.sm-translateUp类，即：

@media screen and (max-width: 576px){
  .sm-translateUp{
     transform: translateY(-85px);
  }
}

这使得：

​

​

现在看起来真的像黑客..。(LOL)但是由于col被困在它的父.row中，所以我现在只想到这一点。

因此，在所有必要的@media规则中为每个引导中断点定义该类：

• sm：>= 576 sm
• md：>= 768 md
• lg：>= 992 lg
• xl：>= 1200 xl