页脚列对齐问题Bootstrap 3

时间：2016-11-23 07:45:12

标签： html css twitter-bootstrap

我正在使用Bootstrap进行自我训练，但是我将页脚内容与PSD文件分开存在问题。我希望页脚与我将附加的图片相同，但我在理解网格结构以完成任务时遇到一些问题。以下是enter image description here

的示例

这是我的代码，直到现在

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

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

2 个答案:

答案 0 :(得分：2)

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

 private IEnumerable<MenuNodeDTO> GetSortedNodes(Menu menu, MenuNode node)
        {
            List<MenuNodeDTO> items = new List<MenuNodeDTO>();

            var nodes = node != null ? node.ChildMenuNodes : menu.MenuNodes;
            var nextNode = node == null
                ? nodes.Where(c => c.PreviousNodeId == null && c.ParentNodeId == null).FirstOrDefault()
                : nodes.Where(c => c.ParentNodeId == node.Id && c.PreviousNodeId == null).FirstOrDefault();

            while (nextNode != null)
            {
                MenuNodeDTO tmpMenuNode = new MenuNodeDTO();
                tmpMenuNode.MenuNodeDtoId = nextNode.Id;
                tmpMenuNode.MenuItemCode = nextNode?.MenuItem?.Code;
                tmpMenuNode.ChildMenuNodes = this.GetSortedNodes(menu, nextNode).ToList();
                tmpMenuNode.MenuSettings = GetMenuSettings(nextNode).ToList();
                items.Add(tmpMenuNode);
                if (!nextNode.NextNodeId.HasValue) break;
                nextNode = nextNode.NextNode;
            }
            return items;
        }

CSS：

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

答案 1 :(得分：1)

在我看来，这就是你应该如何设计布局。

<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>
相关问题
最新问题