1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Нарисовать секцию на bootstrap 4

Главные вкладки

Аватар пользователя Majestio Majestio 24 апреля 2018 в 23:33

Приветствую!

Нужно разместить блоки в секции вот в таком виде:

Изображение секции

А требования таковы:

  1. Ширина A+Б=100% окна
  2. Ширина Б - по своему содержимому
  3. Высота всей секции - по содержимому Б
  4. Высота В - по своему содержимому
  5. Выравнивание А - по середине ширины и высоты
  6. Выравнивание Б - по середине ширины и высоты
  7. Выравнивание В - по середине высоты, по правой стороне ширины

Пока не получается выполнить п.4-7.
Хелп!!!

Комментарии

Аватар пользователя Majestio Majestio 25 апреля 2018 в 19:18

Клянусь - изучу!!! ))) Пока просто дайте наколку - куда копать. Я проблему решил частично (возможно неправильно), получилось вот так:

    <section class="d-flex container-fluid p-0 m-0 container-bg">
      <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>

Остается один шаг - растянуть блок А вниз.

Аватар пользователя Majestio Majestio 26 апреля 2018 в 7:56

Negociant , увы - нерабочий пример!

Если блок Б забить данными и он растянется по высоте, блок А так же на растянется.
Ради эксперимента можно вместо буквы "Б" в примере - использовать копипасту, повторенную 20 раз из:

22222&nbsp;22222&nbsp;22222&nbsp;22222<br>

Аватар пользователя negociant negociant 26 апреля 2018 в 13:40

Majestio wrote:

Если блок Б забить данными и он растянется по высоте, блок А так же на растянется.

Нужно так?
https://codepen.io/anon/pen/WJxYzW
Читайте доки https://getbootstrap.com/docs/4.0/utilities/flex/ и https://getbootstrap.com/docs/4.0/layout/grid/

Аватар пользователя Majestio Majestio 26 апреля 2018 в 13:52

Negociant , большое человеческое спасибо!!!
Все так, как нужно. Доки читал, но видимо недопонял - буду разбираться где и чего я упустил.

Аватар пользователя Majestio Majestio 26 апреля 2018 в 19:53

Еще маленький вопрос, слегка оффтопик - где можно посмотреть Hisrory по bootstrsp 4?
Не могу найти линк где описываются изменения от версии 4.0.0 к 4.1.0.

Аватар пользователя negociant negociant 26 апреля 2018 в 20:18

Majestio wrote:

Еще маленький вопрос, слегка оффтопик - где можно посмотреть Hisrory по bootstrsp 4?

Не могу найти линк где описываются изменения от версии 4.0.0 к 4.1.0.

Первая же ссылка в гугле по запросу bootstrap 4.1 https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/