Илья, ну да, согласен, тогда просто вырезать квадрат не с прозрачностью, а с самой картинкой.
Второй вариант, это@Alisa1, я думаю svg в качестве маски. Надо поискать, что-то такое я слышал. Но если брать вариант с картинкой, как писал выше, то можно подумать над позиционированием или задать жестко высоту. Если там не динамический контент будет, то по идее можно высоту рассчитать.
У slick есть возможность создать второй слайдер и установить второй, как навигацию к первому, получается во втором делаете подписи, и по клику на один слайд откроется нужная картинка. kenwheeler.github.io/slick
Ищите тут asNavFor. Еще здесь есть filtering, такое поле, куда нужно передать функцию фильтрации, но яс ней не работал.
По идее через emit прокинуть. $emit(сюда передать), а родитель подписывается на это событие и передает на функцию, которую объявить надо в watch. Думаю так должно работать.
Как вариант, для ассинхронных запросов лучше использовать не methods, для обработки, а watch или actions, если vuex. Может не в тему, но первое, что пришло в голову.
Поменяйте flex на flex-grow, а значение такое же оставьте. Попробуйте прописать еще всем этим блокам box-sizing: border-box.
Вот еще вариант:
#main div{
display: inline-block;
box-sizing: border-box;
border: 1px solid black;
font-size: 0px;
}
#uk{
width: 20%;
}
#content{
width: 60%;
}
#ru{
width: 20%;
}
#content, #uk, #ru{
font-size: 16px;
}
/*
Всем блокам внутри #main задаем inline-block, они встают друг за другом
Потом задаем всем рамку
Потом указываем, что толщина рамки не должна увеличивать размер блока (border-box)
Делаем размер шрифта 0, так как любые пробелы между div'ами в html файле добавятся на страницу, это тонкости inline-block'ов
Следующий шаг - всем блокам указываем их ширины.
Последний шаг - возвращаем размер шрифта в детях.
*/
Илья, попробуйте в консоль выводить значение окна, посмотрите, что происходит с переменными, чтобы отработал вывод сообщений окно надо отпустить и не трогать 300мс или сколько там зададите.
Еще как варианты, можно текст поместить в тег p или div, задать ему text-align: center; display: inline-block; width: 100%; vertical-align: middle.
Третий вариант, это поместить текст в div или p, задать position: absolute, width: 100%; а вместо height - line-height равный высоте блока, если блоку можно задать высоту жестко без проблем потом в адаптивке.
PravdorubMSK, я вообще верстаю без бутстрапа, это просто подсказка, как быстро можно таблицу украсить. а так, то можно еще стилями заморачиваться, если вопрос как быстро и красиво сделать, то чем бут плох? может отладить что-то надо, зачем еще стили писать, если строку из двух слов передал и все?
Еще есть вот такой вариант...