Html Twitter引导脚手架问题（布局）

我在使用Twitter的引导网格布局网站UI时遇到了几个问题

首先，我的UI模型

我已经使用Firebug探索了UI布局，但事情似乎并不正确。我设置了一个居中的div（不使用offset*，但实际上通过使用我定义的centeredDiv类来保持页面的居中性，而不管窗口大小），其中包含所有手风琴和白色矩形

div

，内容将放在其中

手风琴和内容分类分别为第2和第8级。所以他们加起来填满了他们父div的空间，一个类span10的div

问题如下：

手风琴背景的底部和白色内容矩形的底部没有对齐

包含教堂信息的底部黄色div与白色content div没有正确对齐

底部黄色div中的文本没有水平居中。我需要它

我真的很感谢你的帮助

JSfiddle为您服务
问题1：手风琴背景和白色背景没有对齐，因为您为手风琴设置了错误的高度，它必须是

高度：661px

问题2：可以通过修改列的排列方式来解决。在主行内部和内容div之后使用页脚

<!--Menu and Content-->

<div class="row" id="rowEntirePage">
 <div class="span10 centeredDiv" id="divContentStage">
  <div class="row" id="rowContentStage"> 
  <!--Menu-->
   <div class="span2 accordion" id="menuAccordion"> 
    <!--MINISTRIES-->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseOne"> MINISTRIES </a> </div>
      <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">WORSHIP</a> </li>
            <li><a href="#">CHILDREN</a> </li>
            <li><a href="#">YOUTH</a> </li>
            <li><a href="#">WOMEN</a> </li>
            <li><a href="#">DISCIPLESHIP</a> </li>
            <li><a href="#">MEDIA/TECH</a> </li>
          </ul>
        </div>
      </div>
    </div>
    <!--About Us -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> ABOUT US </a> </div>
    </div>
    <!--THE TEAM -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> THE TEAM </a> </div>
    </div>
    <!--EVENTS -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> EVENTS </a> </div>
    </div>
    <!--SMALL GROUPS-->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> SMALL GROUPS </a> </div>
    </div>
    <!--MEDIA CENTER-->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> MEDIA CENTER </a> </div>
    </div>
    <!--BLOG -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> BLOG </a> </div>
    </div>
  </div>
  <!--Content-->
  <div class="span8" id="divContent"></div>
  <!--Contact Info-->
  <div id="rowContactInfo" class="span8">
    <div id="divContactInfo">
      <p id="paragraphContactInfo">Church Name / Address / Town, State Zip Code Phone # / <a>Email Us</a> <br>
        <a>Maps&amp; Directions</a> </p>
    </div>
  </div>
</div>

问题3：我没有看到任何问题。你能给我看一张你想要的照片吗

更新：第3期：请正确填写页脚列表的样式和格式。在当前的表现形式中，它仅仅是文本

提示：如果调整大小时有任何内容不对齐，可能是因为您必须按以下方式为自定义样式编写媒体查询以获得不同的分辨率：

@media (min-width: 768px) and (max-width: 979px) {


 }
 @media (max-width: 767px) {

    }
  @media (max-width: 480px) {

   }

---

只要把你的自定义样式放在一个特定的部分，在要求的分辨率下看起来不太好

如果你有问题，请告诉我谢谢你的回答，Shail。1.我真不敢相信我错过了。好眼力！2.您的方法对屏幕大小非常敏感。通过将浏览器窗口从最大大小调整为相当小的大小，您可以自己查看。html元素完全不对齐，有时会引导到下一行以缩小窗口大小。3.更改浏览器的大小将显示church info文本不会保持水平居中。@TrueLifeCoder buddy我告诉过你方法，你必须编写媒体查询以使其对齐。将我的JSFIDLE和解决方案更新为well@TrueLifeCoder您正在使用响应引导，因此它将按需要运行，请理解。@TrueLifeCoder我已更新了整个解决方案，请看它是否能按您的要求正常工作。谢谢你更新你的答案。如何在包含手风琴组和内容阶段的行周围放置白色边框？

@media (min-width: 768px) and (max-width: 979px) {


 }
 @media (max-width: 767px) {

    }
  @media (max-width: 480px) {

   }