如何使用引导程序使页脚响应

我在对齐页脚时遇到问题。在移动版权部分不居中。在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

如何使用引导程序使页脚响应

回答

相关问题