Блог

Я работал над игрой и для определенных вещей использовал абсолютное позиционирование. В частности, мне это нужно для некоторых движущихся анимаций, где я должен перемещать элементы и перекрывать их, чтобы создать эффект.

Я пытаюсь сделать игру привлекательной для мобильных устройств, и я столкнулся с некоторыми проблемами, вызванными загрузочными col UMN, которые содержат эти абсолютно позиционированные элементы.

Это тот вид, который я пытаюсь получить (помимо плохо выровненного числа), обратите внимание на красную квадратную строку посередине:

Вся центральная часть экрана (строка с кнопками, смайликами и значок карточки по центру внизу) представляет собой row s, содержащий col s. Это часть его разметки

 <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 — hidden_card это карточка слева от красной, которая становится видимой и сдвигается вправо, чтобы скрыть ее ( animate для управления позицией используется jQuery). Поверх stacked_card основной красной карточки, которая отображается на скриншотах, есть еще одна ее копия, которая переворачивается с помощью jQuery и перемещается вправо для перекрытия hidden_uncovered_card . В значительной степени так работает анимация. Все они зависят от использования position: absolute и манипулирования позиционированием.

По какой-то причине фактический вид, который я получаю с приведенным выше кодом, таков:

Между тремя столбцами сверху и тем, который содержит красную карточку, есть некоторое пространство, и я не понимаю, откуда оно берется. Удаление всего position: absolute , кажется, исправляет это, но, конечно, тогда все анимации, которые зависят от него, перестают работать.

Есть ли какой-либо способ исправить это позиционирование без удаления position: absolute ? Было бы больно переписывать код для всех анимаций, поскольку он отлично работает на рабочем столе.

Вот статическая веб-страница, которая содержит разметку. Вы можете включить режим просмотра с мобильных устройств (скриншоты были сделаны в режиме iPhone 6/7/8) и убедиться в этом сами.

нажмите

Фактическое приложение (то есть бета-версию) можно найти здесь, если вы хотите посмотреть, как работает анимация. Если вам нужна дополнительная информация, просто дайте мне знать.

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-4 где col-4 переопределяет col .
• order-1 и order-xl-1 является необязательным, если здесь нет order-md-3 (например)
  Просто order-1 достаточно.

Для этих 4 разделов убедитесь, что вы правильно используете 12 пространств сетки.

Итак, об col col-* использовании и, для мобильного размера, на самом деле используется 24 пробела из 12.

1. 4 пробела
2. 4 пробела
3. 12 пробелов
4. 4 пробела

И когда col-xl-* применяется, у вас используется 10 пробелов из 12. Это специально?

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 пикселей
• md: > = 768 пикселей
• lg: > = 992px
• xl: > = 1200px