На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Нарисовать секцию на bootstrap 4, нужна помощь
Приветствую!

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

user posted image

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

Пока не получается выполнить п.4-7.
Хелп!!!
Мои программные ништякиhttp://majestio.info
UPD: Все сделал кроме того, что блок А не могу растянуть вниз. Хеееелп! )))

ExpandedWrap disabled
    <!doctype html>
    <html lang="ru">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <link rel="stylesheet" href="css/styles.css">
        <title>Hello, world!</title>
      </head>
     
      <body>
     
        <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>
     
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
     
      </body>
    </html>
Мои программные ништякиhttp://majestio.info
Найденное решение с помощью камарадов с форума по Друпал:

ExpandedWrap disabled
    div class="container-fluid">
      <div class="row">
        <div class="col d-flex flex-column">
          <div class="col d-flex justify-content-center align-items-center">А</div>
          <div class="d-flex justify-content-end align-items-center">В</div>
        </div>
        <div class="col-md-auto d-flex justify-content-center align-items-center">22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br></div>
      </div>
    </div>

Вопрос закрыт.
Мои программные ништякиhttp://majestio.info
1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
0 пользователей:


Рейтинг@Mail.ru
[ Script Execution time: 0,0739 ]   [ 19 queries used ]   [ Generated: 21.05.18, 13:06 GMT ]