爲什麼我的頁腳不能在兩端延伸？

我在嘗試將頁腳設置爲全寬時遇到問題。我認爲它與列的東西，但我不知道如何解決這個問題。我如何填充頁腳的左右兩端？爲什麼我的頁腳不能在兩端延伸？

HTML：

<footer class="container"> 
    <div class="row"> 
    <div class="copyrightText"> 
     <p class="col-sm-4"><a href='../credit/index.html'>&copy; Justin Sanchez</a></p> 
     <ul class="col-sm-8"> 
      <li class="col-sm-1"> 
      <a href="https://www.instagram.com/anothernameforbox/"> 
       <img src="img/instalogo.png" type="button"></li></a> 
      <li class="col-sm-1"> 
      <a href="https://linkedin.com/in/justin-emmanuel-o-sanchez/"> 
       <img src="img/linklogo.png"></li></a> 
      <li class="col-sm-1"> 
      <a href="https://github.com/anothernameforbox"> 
       <img src="img/gitlogo.png"></li></a> 
      <li class="col-sm-1"> 
      <a href="mailto:[email protected]"> 
       <img src="img/mailicon.png"></li></a> 
      </ul> 
    </div> 
</footer>

CSS： /頁腳/

footer { 
    display: block; 
    padding: 20px 0; 
    font-size: 12px; 
    width: 100%; 
    background-color: Azure; 
    background-size: auto; 
} 

footer p { 
    font-size: 15px; 
} 

footer .col-lg-12 { 
    display: inline-flex; 
    justify-content: flex-end; 
} 

footer ul { 
    list-style: none; 
} 

footer li img { 
    width: 32px; 
    height: 32px; 
}

來源

2017-07-25 Justin

1）使用類.container-fluid而不是類.container。

2）.container類選擇風格是這樣的：

.container { 
    margin: 0; 
    width: 100%; 
}

Demo

來源

2017-07-25 02:16:15 Ehsan

的原因是你使用.container類頁腳。使用.container-fluid作爲全寬度容器，跨越視口的整個寬度。

來源

2017-07-25 02:04:37 Alexander

回答

相關問題