你好窥视
非常感谢您抽出宝贵的时间阅读本文。我是Wordpress的新手。我要更新页脚。
我为页脚编写了HTML代码，该代码将在Customisation> Layout> Footer上使用。但是我无法将Bootstrap 4与之链接，因为代码窗口会自动删除链接的bootsrap行，
所以我试图添加页脚小部件，但它影响了我的整个页面。我想使用Bootstrap 4使页脚响应。我不知道如何使用媒体库。我设法使页脚响应网格系统（col-sm-12，col-lg-4），但是无论何时导入bootstrap 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:[email protected]" class="cat-2" target="_blank"> <i class="fa fa-envelope" aria-hidden="true"></i> 📧 [email protected]</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标签。您可以定义它们的范围，例如-在样式表中制定与给定标签/选择器相关的所有规则：
footer.bg {
/* Some footer styles */
}
footer.bg .category{
/* Some footer category styles */
}
但是这些样式是全局应用的。只要匹配规则，就会相应地应用其样式。
根据您的情况，据我了解，您需要Bootstrap网格工具，例如col，row等，但是整个Bootstrap CSS的导入将覆盖并破坏该页面上已有的样式。
有一个官方的Bootstrap网格CSS，它将仅提供那些响应式网格实用程序。请记住，它还附带了一些显示和flexbox实用程序，如果您碰巧使用相同的类，它们可能会与您的某些样式冲突。
这里是链接：https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-grid.min.css