Bootstrap Footer版權和社交媒體圖標

這是我過去幾個小時一直在拍腦的東西，希望得到一些信息來幫助我解決這個問題。隨着下面一行，我正在嘗試弄清楚我如何做到以下幾點。Bootstrap Footer版權和社交媒體圖標

在移動設備上，僅將6個社交媒體圖標放在容器上，以覆蓋視口的整個寬度。

僅在移動設備上，我還希望能夠將版權信息放在自己的行上以覆蓋視口的整個寬度。

<footer> 
    <div class="container"> 
     <div class="row vcenter"> 
      <div class="pull-left col-lg-4 col-xs-12"> 
       <p>Copyright &copy;2016 by Me</p> 
      </div> 
      <div class="col-lg-4 col-lg-offset-4 col-xs-12"> 
       <div class="pull-right"> 
        <a href="#"><i class="fa fa-behance-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-linkedin-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-twitter-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-skype fa-icon"></i></a> 
        <a href="#"><i class="fa fa-facebook-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-github-square fa-icon"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</footer>

來源

2016-07-26 user3732216

各種使用CSS媒體查詢視口大小來實現移動或其他視口特定樣式。在下面我給了版權的父母的div和社會圖標一個id。如果您將瀏覽器的大小調整爲小於400像素，則兩者都應居中對齊。

@media (max-width: 400px) { 
    #copyright { 
     text-align: center; 
    } 
    #social > div{ 
     display: block; 
     width: 100%; 
     margin: 0 auto; 
     text-align: center; 
    } 
}

注：您的版權和社交媒體的div已經採取了視感謝的整個寬度自舉類。我不是爲什麼你提到他們應該專門在自己的路線上。您也可以使用引導視口特定類本身來改變樣式。

另一個說明，我建議你不要再使用浮動或浮動對齊技術。使用類似flexbox來達到同樣的效果。這更可靠。
Brilliant guide to Flexbox

來源

2016-07-26 03:29:16 ykadaru

當我在手機上查看時，沒有任何更改。 – user3732216

在您的第一個div裏面排的vCenter刪除 col-lg-4 col-xs-12 與col-xs-6

在第二個div替換刪除 col-lg-4 col-lg-offset-4 col-xs-12 ，取而代之的col-xs-6

來源

2016-07-26 03:06:17 Laravel14

當我在手機上查看時沒有改變任何內容。 – user3732216

Bootstrap Footer版權和社交媒體圖標

回答

相關問題