Html 页脚列对齐问题引导3

我正在用引导训练自己，但是我在从PSD文件中分离页脚内容时遇到了问题。我希望页脚与我将在这里附加的图片相同，但我在理解网格结构以完成任务时遇到一些问题。下面是一个例子，它应该是怎样的

这是我的密码，直到现在

/*主->页脚CSS样式*/
.about luma{margin:58px 0 16px 0；}
.h3项{字体系列：“Raleway Regular”，无衬线；字体大小：18px；页边距底部：36px；字母间距：0.7px；}
.item ul{列表样式：无；}
.item ul li{显示：块；}
.item ul li a{文字装饰：无；字体系列：“Raleway”，无衬线；字体大小：16px；颜色：909090；线条高度：36px；字母间距：0.7px；}
.ul li a项：悬停{颜色：#8bc541；}
.最新项目{浮动：左；位置：相对；顶部：11px；}
.text{填充：0 4px；字体大小：15px；}
.最新图像{页边距底部：30px；显示：块；宽度：68px；}
.最新图像{最大宽度：100%；高度：自动；}
.btn arrow{float:left；display:inline块；边距：11px 14px 0 0；背景：url（../images/arrow.png）0 0 0无重复；宽度：11px；高度：11px；}
.footer{clear:两者；背景：#000；}
.版权所有{文本对齐：居中；填充：56px 0；边框顶部：1px实心#252525；}
.版权所有p{color:#909090；字体系列：“Raleway常规”，无衬线；字体大小：16px；填充：0 10px；}
.版权a{color:#909090；文本装饰：无；字母间距：0.3px；}
.版权a:hover{color:#8bc541；}

查找设备






关于Luma Comfort






最新帖子
客户服务






连接Luma Comfort





&抄袭；2015年

在我看来，这就是设计布局的方式

<section class="footer-widgets-area">
    <div class="container">
        <div class="row">
            <!-- this is your left div with 4 widgets -->
            <div class="col-md-8">
                <!-- first row with 2 widets  -->
                <div class="row">
                    <div class="col-md-6">
                        <!-- Find Applianceds  -->
                    </div>
                    <div class="col-md-6">
                        <!-- About Luma Comfort -->
                    </div>
                </div>
                <!-- second row to avoid overlapping and displacement due to columns above -->
                <div class="row">
                    <div class="col-md-6">
                        <!-- Customer Care -->
                    </div>
                    <div class="col-md-6">
                        <!-- Connect with Luma Comfort -->
                    </div>
                </div>
            </div>
            <!-- this is your right col with gallery widget -->
            <div class="col-md-4">
                <!-- Latest Posts -->
            </div>
        </div>
        <!-- for copyright area -->
    </div>
</section>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- copyright -->
            </div>
        </div>
    </div>
</footer>

---

您需要使用引导网格嵌套行和列。这是我想出来的，只是想让你知道它是如何工作的。小提琴

---

非常感谢。我会尝试一下，然后我会给你一个反馈

<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>

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

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