Блог

Чего я хочу добиться, так это дизайна нижнего колонтитула, подобного этому, с помощью bootstrap:

Мне уже удалось настроить левый столбец (красный фон) нижнего колонтитула. Проблема в том, что я почему-то не могу оформить правый столбец (черный фон). Как только я устанавливаю высоту на 70%, высота столбца уменьшается до содержимого. Я вижу, что это связано с тем, что высота не устанавливается для родительского контейнера. Но как я могу установить фиксированную высоту и при этом сохранять оперативность реагирования? С медиа-запросами?

Кроме того, как только я настрою отображение на flex для правого столбца, который содержит 2 строки (одна со ссылками, а другая с белым логотипом), строки отображаются в виде столбцов рядом друг с другом. Если я этого не сделаю, выравнивание содержимого не будет иметь никакого эффекта.

Кто-нибудь может мне помочь с этой проблемой? Похоже, я пропустил какой-то важный момент о сеточной системе и утилитах отображения.

Вот как это выглядит сейчас:

Вот мой код:

 <footer class="mt-auto" role="contentinfo">
<div class="container-fluid h-100">
    <div class="row footerContainer d-flex h-100">

        <div class="footerLeftCol col-12 col-md-7">

            <div class="row pl-5 justify-content-center">
                <div class="col-12 mt-3 mb-3"><img
                            src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo_white.png"></div>
            </div>

            <div class="row align-items-center text-center">

                <div class="col-12 col-md-6 contactColLeft">
                   
                </div>

                <div class="col-12 col-md-6">
                   
                </div>
            </div>

            <div class="row text-center mt-3 pb-3">
                <div class="col-12">
                    <a><i class="fab fa-instagram fa-lg mr-2"></i></a>
                    <a><i class="fab fa-facebook-square fa-lg"></i></a>
                </div>
            </div>

            <div class="col-md-12 copyright">
                <p class="text-center pt-2">amp;copy; Copyright <?php echo date( 'Y' );  ?> - All rights
                    reserved.</p>
            </div>

        </div>

        <div class="footerRightCol d-flex col-12 col-md-5">

            <div class="row text-center align-items-center justify-content-center ">
                <div class="col-12 flex-grow-1">
                    <h4> Impressum </h4>
                    <h4> Datenschutz </h4>
                    <h4> Sitemap </h4>
                </div>
            </div>

            <div class="row  flex-grow-1 justify-content-end mr-3 mt-auto text-center">

                <div class="col-6">
                    <h4> Designed by </h4>
                </div>
                <div class="col-6">
                    <img src="<?php echo get_stylesheet_directory_uri()?>/images/logo_fewture.png" style="height: 50px">
                </div>
            </div>
        </div>

    </div>
</div>
 

Вы можете задать свой второй столбец как display: flex и определить его с flex-direction: column помощью и justify-content-end .

Поместите свой контент во второй столбец div, и он начнет расти снизу.

 .box-1 {
  height: 400px;
} 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row border border-primary p-2">
    <div class="col-12 col-md-6 border border-secondary box-1">Column 1</div>
    <div class="col-12 col-md-6 border border-secondary d-flex flex-column justify-content-end p-2">
      <div class="border border-danger p-2"/>
        <p>As the content is growing</p>
        <p>Justify content end with</p>
        <p>Flex direction column</p>
        <p>Will make content growing up :)</p>
      </div>
    </div>
  </div>
</div>