0

ブートストラップの足場を使用したいので、Web ページに合わせるにはいくつか問題があります。

fluid layout左側にメニュー、右側にコンテンツがある単純なページを作成するために を使用しています。

これを行おうとすると2つの問題が発生します：

  1. 両方のメイン コンテナの間にスペースがありません。
  2. 両方のコンテナー内で足場を使用できますか (コードは以下にあります)。<div class="2">または、 and内でフロートを使用する必要があり<div class="10">ますか?

これが私のコードです

  <div class="container-fluid">
    <div class="row-fluid">

      <script type="text/template" id="sidebar-template">
        ****** SIDE BAR ******
      </script>
      <div class="span2">
        <div id='sidebar-container'></div>
      </div>

      <script type="text/template" id="content-template">
        <p>****** CONTENT ******</p>
      </script>
      <div class="span10">
        <div id='content-container'></div>
      </div>
    </div>
  </div>

これが私の最初の問題の3つのスクリーンショットです。

サイドバー コンテンツ コンテナ

ありがとう。

4

1 に答える 1

1

コードを表示すると、メイン コンテナー間に予期される左マージンが表示されます (以下のフィドルを参照)。どこかで上書きしていませんか？また、既存の行内で scaffolding を使用するには、 your の内部に
別のものを追加する必要があります。row-fluidspan

ネストされた足場のjsFiddle
Bootstrap の例(ソースを表示)

EDIT
コンテンツはコンテナ div の外にあります。これを試して：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <div id='frontend-header-container'>
                <script type="text/template" id="frontend-header-template">
                    ****** SIDE BAR ******
                </script>
            </div>
        </div>
        <div class="span10">
            <div id='home-container'>
                <script type="text/template" id="home-template">
                    <p>****** CONTENT ******</p>
                </script>
            </div>
        </div>
    </div>
</div>
于 2013-01-24T21:52:19.570 に答える