Как настроить высоту / высоту элемента изотопа

Question

У меня проблемы с выяснением, почему и как отрегулировать высоту изотопного элемента.

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

В настоящее время похоже, что ширина и высота объявляются динамически. Я не совсем уверен, если это проблема Javascript или я могу исправить с помощью CSS.

Извините, у меня не так много кода, чтобы показать, но это встроенный стиль, показанный в браузер:

<div class="col-xs-12 col-sm-6 col-md-4 isotope-item" data-filter="Digital" style="position: absolute; left: 0px; top: 493px;">

Я также безуспешно пытался добавить следующее:

.isotope-item {
    min-height: 500px;
}

А вот ссылка на страницу:

https://www.ucswireless.oiw11.com/solutions/p25-two-way-radios.htm

Answer 1

Ширина задается bootstrap col классами (в вашем случае col-xs-12 col-sm-6 col-md-4). Я бы не советовал вам переопределять эти классы, вместо этого адаптируйте вашу сетку, чтобы получить желаемый результат.

Подробнее о bootstrap система сетки

Answer 2

Bootstrap классы (col-xs, col-sm) добавляют ширину вашему элементу div. Что касается высоты, min-height устанавливает только минимальную высоту, поэтому, если содержимое превышает min-height, оно будет растягиваться еще дальше. Чтобы установить высоту и ширину, используйте:

.isotope-item {
    height: 500px;
    width: 500px;
}

Но убедитесь, что css не конфликтует с bootstrap классами (col-xs-12 установит свою собственную ширину).

РЕДАКТИРОВАТЬ:

Я посмотрел на веб-страницу, на которую вы ссылались. Проблема не совсем в высоте изотопа-предмета. Вы задаете для поля высоту 500, но содержимое (особенно текст) слишком велико, чтобы уместиться - поэтому оно «выпадает» из высоты 500 пикселей. Почему нижняя коробка не сдвигается вниз? Поскольку у блока есть позиция: абсолютная, поэтому он не выравнивается по сетке, как должно, у него есть определенные c координаты, на которые он установлен.

Самый простой способ исправить это? Добавьте высоту: 500 пикселей и переполнение: авто к вашим коробкам. Но это не будет выглядеть красиво. Следующая лучшая вещь - ограничьте количество текста, которое может go внутри блока.

Кроме этого, вам нужно переделать сетку и не использовать абсолютное положение, поэтому блоки выравниваются по их высоте.