Блог

В последнее время я столкнулся с проблемой при попытке заставить мои веб-точки доступа работать с небольшими устройствами. Даже тогда это, похоже, не всегда является проблемой, это будет зависеть от ориентации телефона. Я вижу, что у меня есть строка Bootstrap 4 с настройкой col-3 col-6 col-3. Центральная колонка имеет большую высоту и включает изображения, в которых непрозрачность увеличивается и уменьшается, поэтому высота постоянна. Когда BS делает свое дело для небольших дисплеев, первый col-3 прерывается должным образом, оставляя место для col-6. Проблема в том, что col-6, похоже, ломается на высоте col-3, и я преодолеваю притирку. При использовании инструментов разработчика я вижу, что это так, но я не хочу устанавливать жесткую высоту, потому что это делает интервал странным и сводит на нет всю цель BS. Вот несколько примеров:

 <div class="row" style="margin: 0vh 5vw;">
  <div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
    <div>
      <i class="fa fa-eye features-icon"></i>
      <h2 style="color: white; font-size: 3vmin">Something</h2>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 text-center  wow" style="height: 53vh;">
    <img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh; 
       display:block; position:absolute; opacity: 1;">
    <img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top: 
       3vh; display:block;position:absolute; opacity: 0;">                   
  </div>
  <div class="col-md-3 col-sm-12 text-center wow fadeInRight">
    <div>
     <i class="fa fa-database features-icon"></i>
     <h2 style="color: white; font-size: 3vmin">More blah blah</h2>                    
    </div>
  </div>
</div>
  

На этом изображении показано, где col перекрывается (синий значок)

Кстати, я установил центральную высоту столбца, потому что без нее я не получаю высоту этого столбца. Я пытался манипулировать им, но, похоже, что бы я ни делал, это исправит одну ориентацию макета и испортит остальные. Должно быть, я упускаю что-то простое в BS. Заранее спасибо за вашу помощь.

Эта строка имеет встроенный стиль, определяющий поле, возможно, проблема в единицах просмотра. Попробуйте изменить это значение на% или px, чтобы посмотреть, как оно себя ведет, или удалите все это поле вместе и используйте утилиты bootstrap margin utilities. Другая вещь, о которой я могу подумать, это попытаться обернуть перекрывающиеся элементы в два разных .container-fluid

Итак, я закончил тем, что сделал то, что считаю мошенничеством, используя jQuery. Я присвоил col div идентификатор #mcsCol и поместил его в свой $(document).готово (функция)

 $("#mcsCol").css({ "height": $("#img1").css("height") });
  

Таким образом, по сути, он проверяет высоту изображения и устанавливает col на ту же высоту. Если у вас есть более нативное решение, я бы с удовольствием его посмотрел.