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

    } 

只要把你的自定義樣式的特定部分那在所需的分辨率看起來不太好