#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>