html - 包含绝对定位元素的 Bootstrap4 列

Question

我一直在开发一款游戏，对于某些事情，我使用了绝对定位。特别是，我需要它用于一些移动动画，我必须在其中滑动元素并重叠它们以创建效果。

我正在努力使游戏在移动设备上看起来更美观，但我遇到了一些由col包含绝对定位元素的 Bootstrap umns 引起的问题。

这是我想要得到的外观（除了对齐错误的数字），请注意中间的红色方形行：

屏幕的整个中心部分（带有按钮、表情符号和下方居中卡片图标的行）是一个row包含cols。这是它的一些标记

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

img具有 id的卡片是红色卡片左侧的一张卡片，该hidden_card卡片可见并向右滑动以覆盖该卡片（它使用 jQueryanimate来操纵位置）。stacked_card在屏幕截图中显示的主要红牌之上，还有另一个副本，用 jQuery 翻转并向右移动以重叠hidden_uncovered_card。这几乎就是动画的工作方式。它们都依赖于使用position: absolute和操纵定位。

出于某种原因，我使用上面的代码得到的实际外观是这样的：

顶部的三列和包含红牌的那一列之间有一些空间，我不明白它是从哪里来的。删除所有position: absolute似乎可以解决这个问题，但是当然，所有依赖它的动画都会停止工作。

有没有办法在不移除的情况下修复这个定位position: absolute？必须为所有动画重写代码会很痛苦，因为它可以在桌面上完美运行。

这是一个包含标记的静态网页。您可以将其转换为移动视图（截图为 iPhone 6/7/8 模式）并亲自查看。

点击

如果您想了解动画的工作原理，可以在此处找到实际的应用程序（即测试版）。如果您需要任何其他信息，请告诉我。

标签： htmlcsstwitter-bootstrap

Answer 1

Bootstrap 使用 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-4where col-4overrides相同col。
• order-1order-xl-1如果这里没有order-md-3（例如）
  Justorder-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);
  }
}

这使得：

现在这真的看起来像一个黑客......（哈哈）但由于它col被困在它的 parent 内.row，这就是我目前所想到的。

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

• sm: >= 576px
• md: >= 768px
• lg: >= 992 像素
• xl: >= 1200 像素