Вопрос о проблеме с использованием свойства align-self в Bootstrap 4 весьма интересен. Давайте рассмотрим данный вопрос более подробно.
Bootstrap 4 - это один из самых популярных CSS-фреймворков, который позволяет быстро и удобно разрабатывать адаптивные веб-сайты. Он предоставляет широкий спектр CSS-классов, которые могут быть использованы для стилизации и макета элементов на странице.
Одним из таких классов является "align-self". Он предназначен для управления вертикальным выравниванием элементов внутри Flexbox-контейнера. Обычно вы можете использовать этот класс вместе с классом "d-flex", чтобы создать Flexbox-контейнер, а затем добавить класс "align-self-{value}" для настройки выравнивания отдельных элементов внутри этого контейнера.
Однако, в Bootstrap 4, свойство "align-self" не работает автоматически, потому что Bootstrap 4 использует сетку (grid system) на основе Flexbox, а не Flexbox по самом себе.
Чтобы достичь желаемого вертикального выравнивания элементов в Bootstrap 4, вместо использования "align-self", вы можете воспользоваться следующими методами:
1. Использование CSS-классов "align-items-{value}" или "justify-content-{value}" на Flexbox-контейнере. Эти классы позволяют управлять вертикальным и горизонтальным выравниванием элементов соответственно.
2. Использование CSS-классов "mt-auto" или "mb-auto" на элементе для выравнивания его вверху или внизу контейнера. "mt-auto" поместит элемент вверху, а "mb-auto" - внизу.
3. Использование дополнительного CSS для создания своих собственных классов и правил, которые будут дополнять или переопределять стили Bootstrap 4.
Вот примеры использования вышеуказанных методов:
<div class="d-flex align-items-center"> <!-- Flexbox-контейнер с вертикальным выравниванием по центру --> <div class="mt-auto">Element 1</div> <!-- Элемент, выравниваемый внизу контейнера --> <div>Element 2</div> <div class="mb-auto">Element 3</div> <!-- Элемент, выравниваемый вверху контейнера --> </div>
<div class="d-flex justify-content-around"> <!-- Flexbox-контейнер с горизонтальным выравниванием равномерно распределенным между элементами --> <div>Element 1</div> <div>Element 2</div> <div>Element 3</div> </div>
Таким образом, нельзя сказать, что "align-self" не работает в Bootstrap 4, но его использование может потребовать некоторых дополнительных действий для достижения вертикального выравнивания элементов.