html – 在Bootstrap 3响应式设计中居中水平列表

概述我尝试过很多东西,但似乎无法将两个页脚列表放在中心位置.不可否认,我是初学者,可能会犯一些基本的逻辑错误.请稍稍握住我的手,在失去之前帮助我.我已经遵循了许多标准解决方案,但我必须做一些冲突或我的定位错误的事情.感谢您的任何帮助.雅各 这包含在流体容器内的Bootstrap 3框架中.我最终希望两个页脚列表在响应式设计中居中. 你可以在这里看到这个网站. Jacob Norwood Heroku 我尝试过很多东西,但似乎无法将两个页脚列表放在中心位置.不可否认,我是初学者,可能会犯一些基本的逻辑错误.请稍稍握住我的手,在失去之前帮助我.我已经遵循了许多标准解决方案,但我必须做一些冲突或我的定位错误的事情.感谢您的任何帮助.雅各

这包含在流体容器内的bootstrap 3框架中.我最终希望两个页脚列表在响应式设计中居中.

你可以在这里看到这个网站. Jacob Norwood Heroku App

CSS / LESS页脚代码

footer {    margin: 25px 0 25px 0;}.footer-social {    display:block;}.footer-social li {     float:left;}.footer-social a {    Font-family: @lato-Font;    Font-weight: @footer-Font-weight;    Font-size: @footer-Font-size;    line-height: 1.5em;    margin-right: .5em;    padding: 7px 10px 7px 10px;}.footer-social a:hover {    color: @main-link-hover;    background-color: @nav-Font-background;}.footer-info {    display:block;    Font-family: @lato-Font;    Font-weight: @footer-Font-weight;    Font-size: @footer-info-Font-size;}.footer-info a {    display:block;    float:left;    margin-right: 10px;    padding: 5px;    color:#5F5F5F;}.footer-info a:hover {    color: @main-link-hover;    background-color: @nav-Font-background;}

HTML页脚代码

<div ><!--CONTENT-->    <div ><!--12 ColUMNS-->        <footer><!--FOOOTER-->              <section >                <ul>                     <li><a href="https://www.facebook.com/jacobnorwooddesign">Facebook</a></li>                     <li><a href="#">Instagram</a></li>                     <li><a href="https://twitter.com/jacobonline">Twitter</a></li>                     <li><a href="http://www.linkedin.com/in/jacobnorwood">linkedIn</a></li>                </ul>        </section>        <section >            <ul>                <li><a href="#" title="Jacob norwood Design copyright">copyright Jacob norwood Design 2014</a></li>                <li><a href="#" title="Phone Number 512.450.4671">Ph. 512.450.4671</a></li>                <li><a href="mailto:work@jacobnorwood.com" title="Email work@jacobnorwood.com">work@jacobnorwood.com</a></li>            </ul>                </section>        </footer><!--FOOOTER-->    </div><!-- 12 ColUMNS --></div><!--CONTENT-->

解决方法 我假设你正在努力实现这样的目标？

如果是这样,您可以将其添加到您的CSS：

.footer-social {  text-align: center;}.footer-social li {  display: inline;}.footer-info {  text-align: center;}.footer-info li {  display: inline-block;}

另外,对于.footer-social li,删除float：left;

总结

以上是内存溢出为你收集整理的html – 在Bootstrap 3响应式设计中居中水平列表全部内容，希望文章能够帮你解决html – 在Bootstrap 3响应式设计中居中水平列表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。