【发布时间】：2020-06-02 22:21:14
【问题描述】：
你好窥视
非常感谢您花时间阅读本文。我是 Wordpress 的新手。我想更新我的页脚。
我为我的页脚编写了一个 HTML 代码，我将在 Customisation>Layout>Footer 上使用它。 但是我无法将 bootstrap 4 与其链接，因为代码窗口会自动删除链接的 bootsrap 行，
所以我尝试添加页脚小部件，但它影响了我的整个页面。我想使用 bootstrap 4 让我的页脚响应。 我不知道如何使用媒体库。我设法使我的页脚响应网格系统（col-sm-12，col-lg-4），但每当我导入我的引导程序 4 链接时。
您能否帮助我了解如何使页脚响应？
如果您想实时查看 你可以看到这个页面的页脚：https://techdevio.com/about/ 不要检查主页的页脚，因为它是由蓬勃发展的建筑师制作的，我只是试图通过编写代码来复制它。 如果您对如何在不使用引导程序的情况下使该代码具有响应性有任何建议，我也将不胜感激。 :)
提前致谢
.bg {
background-color: rgb(49, 65, 140);
color: white;
}
a {
color: white;
text-decoration: none;
}
.container {
text-align: center;
}
#social {
margin: 60px 0px auto;
overflow: hidden;
text-align: center;
}
@media screen and (max-width: 768px) {
#social {
margin: 26px auto;
}
}
#social ul {
margin: 0px auto;
list-style-type: none;
padding: 0px;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
#social li {
margin: 0 17px 0 0;
float: left;
color: black;
}
@media only screen and (max-width: 495px) {
#social li {
margin: 0 0 10px 0;
float: none;
clear: both;
}
}
#social li a {
color: black;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
.category {
font-weight: bold;
font-family: Literata !important;
font-size: 19px !important;
--g-regular-weight: 400;
--g-bold-weight: 700;
}
.cat-2 {
font-size: 18px;
font-family: Muli;
font-weight: 300 !important;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<footer class="bg">
<div class="container pt-3">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<a href="https://techdevio.com/" class="footer-logo">Tech Dev I/O</a>
<p>Tech Dev I/O Keeps You Updated With Latest Tech News & Gadgets. We Also provide Reviews Of Trending Gadgets </div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Information</p>
<p><a href="https://techdevio.com/contact" target="_blank" class="cat-2">➤ Contact us</a></p>
<p><a href="https://techdevio.com/about" target="_blank" class="cat-2">➤ About us</a></li>
<p><a href="https://techdevio.com/privacy-policy/" target="_blank" class="cat-2">➤ Privacy policy</a></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Contact Us</p>
<p> <a href="tel:+918999817454" class="cat-2"><i class="fa fa-phone" aria-hidden="true"></i>???? +91 89998 17454</a></p>
<p><a class="cat-2" href="https://www.google.com/maps/place/Pune,+Maharashtra/@18.5245649,73.7228812,11z/data=!3m1!4b1!4m5!3m4!1s0x3bc2bf2e67461101:0x828d43bf9d9ee343!8m2!3d18.5204303!4d73.8567437" target="_blank"><i class="fa fa-map-marker" aria-hidden="true"></i>
???? 123, Society, Pune, MH 440013</a></li>
</p>
<p>
<a href="mailto:techdevio20@gmail.com" class="cat-2" target="_blank"> <i class="fa fa-envelope" aria-hidden="true"></i> ???? techdevio20@gmail.com</a>
</p>
</ul>
</div>
</div>
</div>
<div id="social">
<ul class="social">
<li><a target="_blank" href="https://www.facebook.com/techdevio.io">Facebook</a></li>
<li><a target="_blank" href="https://twitter.com/TechDev17">Twitter</a></li>
<li><a target="_blank" href="https://www.instagram.com/techdevio/">Instagram</a></li>
<li class="last"><a target="_blank" href="https://in.pinterest.com/techdevio/">Pintrest</a></li>
</ul>
</div>
<div id="social" style="margin-top: 0px;">
<p>©2020 Tech Dev I/O</p>
</div>
</footer>
</body>
</html>【问题讨论】：
标签： html css wordpress gridview