1

私は 960 グリッドから Twitter Bootstrap に移行していますが、これは確かに頭痛の種です。私は地面の構造（Base.html、Djangoを使用）を操作していることを知っていますが、出力は私が望むものではありません。どうすればやりたいことを達成できますか?

html は次のとおりです。

<div id="container">
    <header id='header'>
        <!--Header content-->
    </header>
    <div id='main_container' class='row-fluid'>
        <div id="main" role="main" class="span12">
            <div id='main_content' class="span9">
                <!--Main content-->
            </div>
            <div id='side_bar' class="span3">
                <!--Sidebar container-->
            </div>
        </div>
    </div>
</div>

出力：

 __________________________________
|                                  |
|             header               |
|__________________________________|
|                      |           |
|     main             |   side    |
|     content          |   bar     |
|                      |           |
|                      |           |
|                      |           |
|    <-------- main div ------->   |
|                      |           |
___________________________________

望ましい出力:

 __________________________________
|                                  |
|             header               |
|__________________________________|
|#####|               |      |#####|
|#####|   main        | side |#####|
| body|   content     | bar  | body|
| BG  |               |      | BG  |
|#####|               |      |#####|
|#####|               |      |#####|
|#####|   <--- main div ---> |#####|
|#####|               |      |#####|
___________________________________

ノート：

に乗り換えてみspan12まし<div id="main" role="main" class="span12">たspan9。その後、main divコンテンツのすべてが左揃えになることを除いて、機能します)。ただし、これは正しい方法ではありません。これは、メインがであっても、メインdiv内の s がdiv一緒に12( span9+ ) になることを意味するためです。span3div9

注 2: 「#####」は本文の背景画像です。つまり、メインの div を中央に配置し、ページの 60% を横方向に埋める必要があります。

4

2 に答える 2

1

#main_container 'row-fluid' を次のように 'container' の中に入れたいと思います:

<div class="container">
  <div id='main_container' class='row-fluid'>
    <div id="main" role="main" class="span12">
        <div class="row-fluid">
           <div id='main_content' class="span9">
               // main container
           </div>
           <div id='side_bar' class="span3">
               // sidebar container
           </div>
        </div>
    </div>
  </div>
</div>

また、「必要な出力」にはヘッダーが表示されます-それはブラウザーですか、それとも上部に 100% ウィジェット バーが必要ですか? その場合は、次のようにナビゲーションを上部に配置できます。

<div class="container-fluid">
<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <ul class="nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>
</div>
<div class="container">
  <div id='main_container' class='row-fluid'>
    <div id="main" role="main" class="span12">
        <div class="row-fluid">
           <div id='main_content' class="span9">
               // main container
           </div>
           <div id='side_bar' class="span3">
               // sidebar container
           </div>
        </div>
    </div>
</div>
</div>
于 2013-04-08T18:41:20.200 に答える