如何使用引導程序使頁腳響應

我在對齊頁腳時遇到問題。在移動版權部分不居中。在ipad下它的腳鏈以下。我希望它在ipad和移動視圖的中心位置，而在網絡上它將位於左側，而右側的腳鏈位於同一行。我使用的是引導如何使用引導程序使頁腳響應

.copyright 
 
\t { 
 
\t \t overflow: hidden; 
 
\t \t background: #128cbf \t ; \t 
 
\t \t float: left; 
 
\t } 
 
\t 
 
\t .copyright p 
 
\t { 
 
\t \t letter-spacing: 0.1em; 
 
\t \t font-size: 0.50em; 
 
\t \t color: #ffffff; 
 
\t \t font-weight: 300; 
 
\t } 
 
\t 
 
\t 
 
\t .footerlinks{ 
 
\t \t float: right; 
 
\t } 
 

 
\t .footerlinks, .footerlinks a 
 
\t { 
 
\t \t letter-spacing: 1px; 
 
\t \t text-decoration: none; 
 
\t \t text-transform: uppercase; 
 
\t \t font-size: 0.5em; 
 
\t \t color: #ffffff; 
 
\t \t padding: 0 5px; 
 
\t \t font-weight: 200; 
 
\t } 
 
\t 
 
/* Tabled Portrait */ 
 
@media screen and (max-width: 768px) { 
 
    #primary { width:100%; } 
 
    #secondary { width:100%; margin:0; border:none; } 
 
\t .footerlinks { text-align: center; font-size: 1.5em; padding: 0 20px;} 
 
\t .copyright { font-size: 1em; } 
 
}

\t <div class="row"> 
 
     \t <div class="footerlinks text-center .col-sm-6 .col-md-5 .col-lg-6"> 
 
     \t \t \t <p><span><a href="#">text</a></span>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a></p> 
 
     \t \t </div> 
 
    \t \t <div class="copyright .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0"> 
 
     \t \t \t <p>&copy; Copyright &middot; All Rights Reserved</p> 
 
     \t \t </div> 
 
    \t \t </div>

來源

2016-10-03 lyssaa

關閉您的浮動移動設備，並在'copyright' div上設置'text-align：center' – Lee

您需要刪除所有的類的.在你的HTML或否則他們wan't適用於你的代碼。編寫css時只需要.。

這是應該的：

.copyright 
 
\t { 
 
\t \t overflow: hidden; 
 
\t \t background: #128cbf \t ; \t 
 
\t \t float: left; 
 
\t } 
 
\t 
 
\t .copyright p 
 
\t { 
 
\t \t letter-spacing: 0.1em; 
 
\t \t font-size: 0.50em; 
 
\t \t color: #ffffff; 
 
\t \t font-weight: 300; 
 
\t } 
 
\t 
 
\t 
 
\t .footerlinks{ 
 
\t \t float: right; 
 
\t } 
 

 
\t .footerlinks, .footerlinks a 
 
\t { 
 
\t \t letter-spacing: 1px; 
 
\t \t text-decoration: none; 
 
\t \t text-transform: uppercase; 
 
\t \t font-size: 0.5em; 
 
\t \t color: #ffffff; 
 
\t \t padding: 0 5px; 
 
\t \t font-weight: 200; 
 
\t } 
 
\t 
 
/* Tabled Portrait */ 
 
@media screen and (max-width: 768px) { 
 
    #primary { width:100%; } 
 
    #secondary { width:100%; margin:0; border:none; } 
 
\t .footerlinks { text-align: center; font-size: 1.5em; padding: 0 20px;} 
 
\t .copyright { font-size: 1em; } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="row"> 
 
    <div class="footerlinks text-center col-sm-6 col-md-5 col-lg-6"> 
 
     <p><span><a href="#">text</a></span>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a>&middot;<a href="#">text</a></p> 
 
    </div> 
 
    <div class="copyright col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"> 
 
     <p>&copy; Copyright Tongle 2013-2016 &middot; All Rights Reserved</p> 
 
    </div> 
 
</div>

來源

2016-10-03 07:18:32 RasmusGlenvig

你可以簡單地使用媒體查詢像小型和超小型設備：

@media screen and (max-width: 991px){ 
    .footerlinks, .copyright{ 
     text-align: center; 
    } 
}

另一種選擇是使用Bootstrap響應實用程序類。您可以查看此頁面以瞭解更多關於設備斷點和響應實用程序類別的實例 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

來源

2016-10-03 07:45:08 Alex

如何使用引導程序使頁腳響應

回答

相關問題