Приветствую!
Нужно разместить блоки в секции вот в таком виде:
А требования таковы:
- Ширина A+Б=100% окна
- Ширина Б - по своему содержимому
- Высота всей секции - по содержимому Б
- Высота В - по своему содержимому
- Выравнивание А - по середине ширины и высоты
- Выравнивание Б - по середине ширины и высоты
- Выравнивание В - по середине высоты, по правой стороне ширины
Пока не получается выполнить п.4-7.
Хелп!!!
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
А без Бутсрап никак?
Тут явно не бутстрап а flex надо применять.
Который активно используется в Bootstrap 4, что автор и ищет
Наверное прежде чем использовать flex-классы бутстрапа правильнее изучить сначала flex Wink
Клянусь - изучу!!! ))) Пока просто дайте наколку - куда копать. Я проблему решил частично (возможно неправильно), получилось вот так:
<div class="container-fluid p-0 m-0">
<div class="d-flex flex-grow-1 flex-column">
<div class="d-flex justify-content-center">Flex item X</div>
<div class="d-flex justify-content-end">Flex item Y</div>
</div>
</div>
<div>
<img src="http://www.name-list.net/img/portrait/Ololol_1.jpg" class="figure-img img-fluid">
</div>
</section>
Остается один шаг - растянуть блок А вниз.
Чего только не придумают, лишь бы таблицами не верстать.
Ага... Целую грид-систему придумали.
https://codepen.io/anon/pen/WJxYzW
Negociant , увы - нерабочий пример!
Если блок Б забить данными и он растянется по высоте, блок А так же на растянется.
Ради эксперимента можно вместо буквы "Б" в примере - использовать копипасту, повторенную 20 раз из:
22222 22222 22222 22222<br>Нужно так?
https://codepen.io/anon/pen/WJxYzW
Читайте доки https://getbootstrap.com/docs/4.0/utilities/flex/ и https://getbootstrap.com/docs/4.0/layout/grid/
Negociant , большое человеческое спасибо!!!
Все так, как нужно. Доки читал, но видимо недопонял - буду разбираться где и чего я упустил.
Еще маленький вопрос, слегка оффтопик - где можно посмотреть Hisrory по bootstrsp 4?
Не могу найти линк где описываются изменения от версии 4.0.0 к 4.1.0.
Первая же ссылка в гугле по запросу bootstrap 4.1 https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/
Спасибо!!!