Держать нижний колонтитул в нижней части с помощью Bootstrap на Wordpress - PullRequest
Новая
       31

Держать нижний колонтитул в нижней части с помощью Bootstrap на Wordpress

1 голос
/ 01 октября 2019

Я пытаюсь сохранить нижний колонтитул, который я сделал с помощью Bootstrap внизу страницы. Я пробовал некоторые решения, написанные в сети, но никто не работал, или если бы это было так, это испортило бы весь мой нижний колонтитул (или всю страницу). Это мой файл footer.php rn: 

<footer>
	<div class="container-fluid" style="padding-bottom:22px;">
		<div class="row">
			<div class="col-4" align="center">
				<h4> RANDOM </h4>
				<p>
					<strong>Lorem</strong>: <br>
					Lorem Ipsum 00 <br>
					0000 Text <br>
					<strong>Tel</strong>: <a href="tel: +101234567"> +1.01234567 </a>
				</p>
			</div>
			<div class="col-4" align="center">
				<h4> RANDOM </h4>
				<p>
					<strong>Text</strong>: <br>
					12:00 - 16:00 / 18:30 - 00:00 <br>
					<strong>Text</strong> <br>
					12:00 - 16:00 / 18:30 - 00:00
				</p>
			</div>
			<div class="col-4" align="center">
				<h4> SOCIAL NETWORK </h4>
				<a href="#" target="_blank"> <i class="fab fa-facebook fa-2x" style="color: #333333;"></i> </a>
			</div>
		</div>
	</div>
	
	<div class="container-fluid bg-light" align="center" style="padding-top:22px; padding-bottom:22px;">
		<p style="font-family: lato; font-size: 14px; color: #515050; display: table-cell; vertical-align: middle;">
			©Random • Sample, Text • Tel: +1 01234567 • <a href="#" target="_blank">Privacy Policy</a>
		</p>
	</div>
</footer>

<?php wp_footer(); ?>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

1 Ответ

2 голосов
/ 01 октября 2019

Обычно расположение фиксированного нижнего колонтитула делает хитрость: 

.your-footer-class {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Какие решения вы пробовали?

Вот хорошее объяснение: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers

А здесьЕсть 5 способов сделать это: https://css -tricks.com / couple-take-sticky-footer /

...