如何使版权块填满页脚的整个宽度?
How can I make the copyright block fill the full width of the footer?
我需要让版权块填满页脚的整个宽度,
** 我正在使用 bootstrap 4 并且添加了一些额外的 CSS 规则
我将添加 HTML 和 CSS,
这里是 html:
<footer>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<p>تابع الأخبار</p>
<div>
search area
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 ">
<ul class="list-unstyled">
<li><a href="#">الرئيسيّة</a></li>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">المقالات</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 ">
<div>
<p>تابعنا</p>
<ul class="list-unstyled">
<li><a href="http://google.com/+"><i class="fab fa-google"></i> </a></li>
<li> <a href="http://www.facebook.com/profile.php?id="><i class="fab fa-facebook"></i> </a></li>
<li> <a href="http://www.linkedin.com/in/"><i class="fab fa-linkedin-in"></i> </a></li>
<li><a href="http://twitter.com/"><i class="fab fa-twitter"></i> </a></li>
<li><a href="http://youtube.com/"><i class="fab fa-youtube"></i> </a></li>
<li><a href="mailto:"><i class="fas fa-envelope"></i> </a></li>
</ul>
</div>
</div>
<div class="row last-content">
<div class="col-auto "></div>
<p>© Copyright 2021 Shahed </p>
</div>
</div>
</div>
</footer>
这里是 CSS:
footer{
background:#464545fa;
height:fit-content;
color: white;
}
ul li{
display: inline;
}
.last-content{
background:#2b2a2afa;
box-sizing: border-box;
margin-top: 12px;
display: block;
}
页脚的外观如下:
footer
据我了解,您想为整个页面扩展版权部分的宽度。这是相关代码。
footer {
background: #464545;
height: fit-content;
color: white;
}
ul li {
display: inline;
}
.last-content {
background: #2b2a2a;
box-sizing: border-box;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<p>تابع الأخبار</p>
<div>
search area
</div>
</div>
<div class="col-12 col-sm-12 col-md-4">
<ul class="list-unstyled">
<li><a href="#">الرئيسيّة</a></li>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">المقالات</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4">
<div>
<p>تابعنا</p>
<ul class="list-unstyled">
<li><a href="http://google.com/+"><i class="fab fa-google"></i></a></li>
<li><a href="http://www.facebook.com/profile.php?id="><i class="fab fa-facebook"></i></a></li>
<li><a href="http://www.linkedin.com/in/"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="http://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://youtube.com/"><i class="fab fa-youtube"></i></a></li>
<li><a href="mailto:"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div class="last-content col-12 py-3 mt-5 text-center">
© Copyright 2021 Shahed
</div>
</footer>
我需要让版权块填满页脚的整个宽度, ** 我正在使用 bootstrap 4 并且添加了一些额外的 CSS 规则 我将添加 HTML 和 CSS,
这里是 html:
<footer>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<p>تابع الأخبار</p>
<div>
search area
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 ">
<ul class="list-unstyled">
<li><a href="#">الرئيسيّة</a></li>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">المقالات</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 ">
<div>
<p>تابعنا</p>
<ul class="list-unstyled">
<li><a href="http://google.com/+"><i class="fab fa-google"></i> </a></li>
<li> <a href="http://www.facebook.com/profile.php?id="><i class="fab fa-facebook"></i> </a></li>
<li> <a href="http://www.linkedin.com/in/"><i class="fab fa-linkedin-in"></i> </a></li>
<li><a href="http://twitter.com/"><i class="fab fa-twitter"></i> </a></li>
<li><a href="http://youtube.com/"><i class="fab fa-youtube"></i> </a></li>
<li><a href="mailto:"><i class="fas fa-envelope"></i> </a></li>
</ul>
</div>
</div>
<div class="row last-content">
<div class="col-auto "></div>
<p>© Copyright 2021 Shahed </p>
</div>
</div>
</div>
</footer>
这里是 CSS:
footer{
background:#464545fa;
height:fit-content;
color: white;
}
ul li{
display: inline;
}
.last-content{
background:#2b2a2afa;
box-sizing: border-box;
margin-top: 12px;
display: block;
}
页脚的外观如下: footer
据我了解,您想为整个页面扩展版权部分的宽度。这是相关代码。
footer {
background: #464545;
height: fit-content;
color: white;
}
ul li {
display: inline;
}
.last-content {
background: #2b2a2a;
box-sizing: border-box;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<p>تابع الأخبار</p>
<div>
search area
</div>
</div>
<div class="col-12 col-sm-12 col-md-4">
<ul class="list-unstyled">
<li><a href="#">الرئيسيّة</a></li>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">المقالات</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4">
<div>
<p>تابعنا</p>
<ul class="list-unstyled">
<li><a href="http://google.com/+"><i class="fab fa-google"></i></a></li>
<li><a href="http://www.facebook.com/profile.php?id="><i class="fab fa-facebook"></i></a></li>
<li><a href="http://www.linkedin.com/in/"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="http://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://youtube.com/"><i class="fab fa-youtube"></i></a></li>
<li><a href="mailto:"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div class="last-content col-12 py-3 mt-5 text-center">
© Copyright 2021 Shahed
</div>
</footer>