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

Question

我在調整頁腳時遇到問題。 在移動設備上，版權部分未居中。 在ipad上，它位於頁腳鏈接的下方。 我希望它在iPad和移動設備視圖的中心位置，而在Web上，它應該位於左側，而腳注鏈接則位於右側。 我正在使用引導程序

 .copyright { overflow: hidden; background: #128cbf ; float: left; } .copyright p { letter-spacing: 0.1em; font-size: 0.50em; color: #ffffff; font-weight: 300; } .footerlinks{ float: right; } .footerlinks, .footerlinks a { letter-spacing: 1px; text-decoration: none; text-transform: uppercase; font-size: 0.5em; color: #ffffff; padding: 0 5px; font-weight: 200; } /* Tabled Portrait */ @media screen and (max-width: 768px) { #primary { width:100%; } #secondary { width:100%; margin:0; border:none; } .footerlinks { text-align: center; font-size: 1.5em; padding: 0 20px;} .copyright { font-size: 1em; } } 

  <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 &middot; All Rights Reserved</p> </div> </div> 

Answer 1

您需要刪除. 從您的html中的所有類中獲取，否則它們將不適用於您的代碼。 您只需要. 當寫CSS。

這應該是這樣的：

 .copyright { overflow: hidden; background: #128cbf ; float: left; } .copyright p { letter-spacing: 0.1em; font-size: 0.50em; color: #ffffff; font-weight: 300; } .footerlinks{ float: right; } .footerlinks, .footerlinks a { letter-spacing: 1px; text-decoration: none; text-transform: uppercase; font-size: 0.5em; color: #ffffff; padding: 0 5px; font-weight: 200; } /* Tabled Portrait */ @media screen and (max-width: 768px) { #primary { width:100%; } #secondary { width:100%; margin:0; border:none; } .footerlinks { text-align: center; font-size: 1.5em; padding: 0 20px;} .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> 

Answer 2

您可以簡單地將媒體查詢用於小型和超小型設備，例如：

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

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