0

Twitter の Bootstrap グリッドを使用して Web サイトの UI をレイアウトする際に、いくつかの問題があります。

まず、UI モックアップの jsFiddleを次に示します。

Firebug を使用して UI レイアウトを調査しましたが、正しくないようです。divすべてのアコーディオンとコンテンツが配置される白い四角形を含む中央の div (offset* を使用しませんが、定義した centeredDiv クラスを利用して、ウィンドウ サイズに関係なくページの中央を実際に維持します) を設定します。

アコーディオンとコンテンツ div は、それぞれ span2 と span8 クラスです。したがって、それらは合計されて、クラス span10 の div である親 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>

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

   }

必要な解像度で見栄えがよくない特定のセクションにカスタムスタイルを配置するだけです

于 2013-02-28T04:06:30.617 に答える