在Bootstrap中設置水平列表3響應式設計

我已經嘗試了很多事情，但似乎無法將兩個頁腳列表居中。無可否認，我是初學者，可能會犯一些基本的邏輯錯誤。請握住我的手，在我失去之前幫助我。我遵循了許多標準解決方案，但我必須做一些衝突或我的目標是錯誤的。感謝您的任何幫助。 Jacob在Bootstrap中設置水平列表3響應式設計

這包含在流體容器內的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 class="row"><!--CONTENT--> 
    <div class="col-lg-12"><!--12 COLUMNS--> 
     <footer><!--FOOOTER-->  
     <section class="footer-social clearfix"> 
       <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 class="footer-info"> 
      <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:[email protected]" title="Email [email protected]">[email protected]</a></li> 
      </ul> 
       </section> 

     </footer><!--FOOOTER--> 
    </div><!-- 12 COLUMNS --> 
</div><!--CONTENT-->

來源

2014-04-03 Jacobonline

您的網站看起來不錯。你想要準確地居中什麼？ – Morven

您想要頂部菜單居中您的徽標和屏幕邊緣之間的空間嗎？ –

對不起。我發佈了錯誤的HTML部分代碼。現在是正確的。謝謝你的幫助。 – Jacobonline

我假設你想實現這樣的事情？

enter image description here

如果是這樣，你可以添加到您的CSS：

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

而且，.footer-社會裏，去除浮動：左;

來源

2014-04-03 19:18:24

在Bootstrap中設置水平列表3響應式設計

回答

相關問題