2
我正在訓練自己與Bootstrap，但我有問題從我的PSD文件分離頁腳內容。我想頁腳是一樣的，我將在這裏附上圖片，但我有一些問題了解電網的結構來完成任務。下面是例子應該如何
頁腳列對齊問題引導3
，這裏是我的代碼，直到這一刻
/* Main -> Footer CSS Styles */
.about-luma { margin: 58px 0 16px 0; }
.item h3 { font-family: "Raleway-Regular", sans-serif; font-size: 18px; margin-bottom: 36px; letter-spacing: 0.7px; }
.item ul { list-style: none; }
.item ul li { display: block; }
.item ul li a { text-decoration: none; font-family: "Raleway", sans-serif; font-size: 16px; color: #909090; line-height: 36px; letter-spacing: 0.7px; }
.item ul li a:hover { color: #8bc541; }
.latest-items { float: left; position: relative; top: 11px; }
.text { padding: 0 4px; font-size:15px; }
.latest-image { margin-bottom: 30px; display: block; width: 68px; }
.latest-image { max-width: 100%; height: auto; }
.btn-arrow { float: left; display: inline-block; margin: 11px 14px 0 0; background: url(../images/arrow.png) 0 0 no-repeat; width: 11px; height: 11px; }
.footer { clear: both; background: #000; }
.copyrights { text-align: center; padding: 56px 0 0 0; border-top: 1px solid #252525; }
.copyrights p { color: #909090; font-family: "Raleway-Regular", sans-serif; font-size: 16px; padding: 0 10px; }
.copyrights a { color: #909090; text-decoration: none; letter-spacing: 0.3px; }
.copyrights a:hover { color: #8bc541; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="contact-information">
<div class="container">
<div class="about-luma">
<div class="col-md-4">
<div class="row">
<div class="item">
<h3>Find Appliances</h3>
<ul>
<li><span class="btn-arrow"></span><a href="#">Products</a></li>
<li><span class="btn-arrow"></span><a href="#">Product Videos</a></li>
<li><span class="btn-arrow"></span><a href="#">Product Knowledge Base</a></li>
<li><span class="btn-arrow"></span><a href="#">Where to Buy</a></li>
</ul>
</div><!-- item -->
</div><!-- row -->
</div><!-- col-md-4 -->
<div class="row">
<div class="col-md-4">
<div class="item">
<h3>About Luma Comfort</h3>
<ul>
<li><span class="btn-arrow"></span><a href="#">About Us</a></li>
<li><span class="btn-arrow"></span><a href="#">Press</a></li>
<li><span class="btn-arrow"></span><a href="#">Privacy Policy</a></li>
<li><span class="btn-arrow"></span><a href="#">Terms of Use</a></li>
</ul>
</div><!-- item -->
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<div class="item">
<h3>Latest Posts</h3>
<div class="latest-items">
<a href="#"><img src="https://s13.postimg.org/8o0ba1vyr/documents.jpg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
<a href="#"><img src="https://s13.postimg.org/vgjbpvitv/temperature.jpg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
<a href="#"><img src="https://s13.postimg.org/fsi4j3383/product_sm_5.jpg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
<a href="#"><img src="https://s13.postimg.org/yyvbm9jpv/product_sm_6.jpgg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
</div>
</div><!-- item -->
</div><!-- col-md-4 -->
</div><!-- row -->
</div><!-- about-luma -->
<div class="contacts">
<div class="row">
<div class="col-md-4">
<div class="item">
<h3>Customer Care</h3>
<ul>
<li><span class="btn-arrow"></span><a href="#">Contact Us</a></li>
<li><span class="btn-arrow"></span><a href="#">Product Support</a></li>
<li><span class="btn-arrow"></span><a href="#">Become a Dealer</a></li>
<li><span class="btn-arrow"></span><a href="#">Blog</a></li>
</ul>
</div><!-- item -->
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<div class="item">
<h3>Connect with Luma Comfort</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div><!-- item -->
</div><!-- col-md-4 -->
</div><!-- row -->
</div><!-- contacts -->
<div class="row">
<div class="col-md-12">
<div class="copyrights">
<p>© 2015 <a href="#" target="_blank">lumacomfort.com</a></p>
</div><!--copyrights -->
</div>
</div>
</div><!-- container -->
</div><!-- contact-info -->
</footer><!-- footer -->任何建議或簡單的解釋哪裏是我的錯？
謝謝。我會嘗試一下，然後我會給你一個反饋 – divisionkiller