如何使版权块填充页脚的整个宽度？答案

【问题标题】：How can I make the copyright block fill the full width of the footer?如何使版权块填充页脚的整个宽度？
【发布时间】：2021-07-24 19:36:30
【问题描述】：

我需要让版权块填满页脚的整个宽度， ** 我正在使用 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

【问题讨论】：

你的最后一个元素应该跨越 12 列：使用 col-12 类 ;) : <div class="row col-12 last-content"> 就可以了

标签： html css web bootstrap-4 footer

【解决方案1】：

据我了解，您想扩大整个页面的版权部分的宽度。这是它的代码。

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>

【讨论】：