0

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

首先，这是我的 UI 模型的 jsFiddle。

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

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

问题如下：

  1. 手风琴的背景底部和白色内容矩形的底部没有对齐。
  2. 包含教会信息的底部黄色 div 未与白色内容 div 正确对齐。
  3. 底部黄色 div 中的文本未水平居中。我需要它。

我真的很感激帮助！

4

1 回答 1

0

JSfiddle for you 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：请正确编写样式并格式化您的页脚列表。与当前的表示形式一样，它只是 text 。

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

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


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

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

   }

只需为在所需分辨率下看起来不太好的特定部分添加自定义样式

于 2013-02-28T04:06:30.617 回答