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

Question

I'm having a problem aligning the footer. At mobile the copyright part is not centered. at ipad it's below the footerlinks. I want it at center at ipad and mobile view while on web it would be on the left side while footerlinks on the right in one row. I'm using 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

You need to remove the . from all your classes in your html or otherwise they wan't apply to your code. You only need the . when writing css.

This is how it should be:

 .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

You could simply use the media query for small and extra small devices like:

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

Other option is to use the Bootstrap responsive utility classes. You can check out this page to learn more about the device break points and live example of responsive utility classes- http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php