我在调整页脚时遇到问题。在移动设备上,版权部分不在中心。在ipad它低于footerlinks。我希望它在ipad和移动视图的中心,而在网络上它将在左侧,而右侧的footerlink在一行。我正在使用bootstrap
.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>·<a href="#">text</a>·<a href="#">text</a>·<a href="#">text</a>·<a href="#">text</a>·<a href="#">text</a>·<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>© Copyright · All Rights Reserved</p>
</div>
</div>
答案 0 :(得分:3)
您需要从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>·<a href="#">text</a>·<a href="#">text</a>·<a href="#">text</a>·<a href="#">text</a>·<a href="#">text</a>·<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>© Copyright Tongle 2013-2016 · All Rights Reserved</p>
</div>
</div>
答案 1 :(得分:1)
您可以简单地将媒体查询用于小型和超小型设备,例如:
@media screen and (max-width: 991px){
.footerlinks, .copyright{
text-align: center;
}
}
其他选项是使用Bootstrap响应实用程序类。您可以查看此页面,详细了解设备断点和响应式实用程序类的实例 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php