Question

我在调整页脚时遇到问题。在移动设备上，版权部分不在中心。在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>&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

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

2 个答案: