Как мне расположить нижний колонтитул в самом низу экрана

#html #css

#HTML #css

Вопрос:

У меня есть следующий экран, в котором используется страница макета. В этом представлении отображается карточка и применяется страница макета. Как мне расположить теги About, Services и Our Work в нижней части экрана.

введите описание изображения здесь

То, что я пробовал:

 <footer class="container space-1">
    <div class="row align-items-md-center text-center">
        @*<div class="col-md-3 mb-4 mb-md-0">
                <a href="#" aria-label="Front">
                    <img class="brand" src="https://template.tritonexpress.co.za/Images/Triton.png" alt="logo" width="120" />
                </a>
            </div>*@

        <div class="col-sm-10 col-md-6 mb-4 mb-sm-0">
            <!-- Nav List -->
            <ul class="nav nav-sm nav-x-0 justify-content-center text-md-center">
                <li class="nav-item px-3">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item px-3">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item px-3">
                    <a class="nav-link" href="#">Our work</a>
                </li>
            </ul>
            <!-- End Nav List -->
        </div>

        <div class="col-sm-5 col-md-3 text-sm-right">
            <!-- Social Networks -->
            <ul class="list-inline mb-0">
                <li class="list-inline-item">
                    <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
                        <i class="fab fa-google"></i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
                        <i class="fab fa-twitter"></i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
                        <i class="fab fa-github"></i>
                    </a>
                </li>
            </ul>
            <!-- End Social Networks -->
        </div>
    </div>
</footer>
 

Комментарии:

1. Используете ли вы определенный фреймворк CSS (например, bootstrap, tailwindcss)?

2. @RobBailey Я использую bootstrap

Ответ №1:

Попробуйте добавить это :

 <div class="footer fixed-bottom"></div>