html - 页脚列对齐问题 Bootstrap 3

Question

我正在使用 Bootstrap 进行 self 培训，但在将页脚内容与 PSD 文件分离时遇到问题。我希望页脚与我将在此处附加的图片相同，但我在理解网格结构以完成任务时遇到一些问题。这是它应该如何的示例

这是我到目前为止的代码

/* 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>&copy; 2015 <a href="#" target="_blank">lumacomfort.com</a></p>
          </div><!--copyrights -->
        </div>
      </div>
    </div><!-- container -->
  </div><!-- contact-info -->
</footer><!-- footer -->

任何建议或简单的解释我的错误在哪里？

Answer 1

您需要使用 Bootstrap 网格嵌套行和列。这是我想出来的，只是为了让您知道它是如何工作的。 fiddle here .

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-6">
            <h5>One</h5>
            <ul>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
            </ul>
          </div>
          <div class="col-md-6">
             <h5>Two</h5>
            <ul>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <h5>Three</h5>
            <ul>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
            </ul>
          </div>
          <div class="col-md-6">
             <h5>Four</h5>
            <ul>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <h5>Latest Posts</h5>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis eius cumque veritatis illum! Perspiciatis voluptates repellendus blanditiis porro, eos unde!
      </div>
    </div>
    <hr>
    <div class="sub-footer text-center">
      &copy; 2016 Sample
    </div>
  </div>
</footer>

CSS:

.footer {
  background: #000;
  color: #fff;
}

.sub-footer {
  margin-bottom: 10px;
}