Twitter Bootstrap脚手架问题（布局）

Question

我有几个问题，使用Twitter的Bootstrap网格布置网站UI。

首先，here is the jsFiddle为我的UI模型。

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

手风琴和内容div分别是span2和span8类。所以他们加起来填补他们的父div的空间，span10类的div。

的问题如下：

1. 背景手风琴和白色，内容长方形底部的底部是不排队。
2. 包含教堂信息的底部黄色div与白色内容div没有正确排列。
3. 底部黄色div内的文字不是水平居中的。我需要它。

我真的很感谢帮助！

Answer 1

的jsfiddle你see it in action
问题1：手风琴背景和白色背景不排队，因为你已经为手风琴错误的高度，它必须是height: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> 

并指定下列属性的接触DIV：

#rowContactInfo { 
background: linear-gradient(#F4D987, #FFFFFF) repeat scroll 0 0 transparent; 
color: #FF0000; 
height: 75px; 
margin: 0; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px; 
vertical-align: top; 
} 

问题3：我没有看到任何问题上都存在。你能告诉我一张你想要的照片吗？

更新：问题3：请正确编写样式并格式化页脚列表。正如目前的代表性，它仅仅是文字。

提示：如果有什么犯规对齐当调整，它可能是因为你必须写媒体查询您的自定义样式不同分辨率的方式如下：

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


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

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

    } 

只要把你的自定义样式的特定部分那在所需的分辨率看起来不太好