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

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

    user posted image

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

    Пока не получается выполнить п.4-7.
    Хелп!!!
      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>
        Найденное решение с помощью камарадов с форума по Друпал:

        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>

        Вопрос закрыт.
        0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
        0 пользователей:


        Рейтинг@Mail.ru
        [ Script execution time: 0,0283 ]   [ 16 queries used ]   [ Generated: 28.03.24, 10:40 GMT ]