Twitter Bootstrap：固定了頂部標題和側邊欄

Question

我正在嘗試使用Twitter Bootstrap創建特定的布局。 由於我不是CSS專家，所以我不知道該怎么做，甚至不可能。

它看起來應該像這樣：

也許你可以幫我。

Answer 1

假設您不需要圖表左上方的任何內容，則可以使用以下標記... http://jsfiddle.net/abrudtkuhl/JV3bN/

注意：標記基於您在側邊欄上方不需要任何內容​​的假設（請參閱我對問題的評論）。 我使用了引導程序的“偏移”功能來移動標題。

例如： <div class="span10 offset2">

演示： http : //jsfiddle.net/abrudtkuhl/JV3bN/embedded/result/

另一個注意事項：您必須將靜態高度設置為僅使內容div可滾動。 在示例中，我以200px為例。

<div class="container">
    <div class="row">
        <div class="span10 offset2">
            <div class="page-header">
                <h1>Hello World</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span2">
            Sidebar
        </div>
        <div id="content" class="span10">
            <h2>Bacon</h2>
            <p>Bresaola pork loin shoulder sausage doner t-bone short ribs pork belly meatloaf shank. Turkey shank shankle shoulder pastrami chicken. Shoulder beef meatball meatloaf boudin turducken pancetta swine hamburger sausage jowl sirloin chuck. Prosciutto frankfurter t-bone corned beef beef capicola bacon chuck salami ribeye. Salami drumstick shankle ribeye jerky. Corned beef leberkas pastrami pork tenderloin bacon brisket flank frankfurter beef ribs fatback tongue swine tri-tip. Flank sirloin t-bone doner, bacon shankle chuck ham.</p>
            <p>Bresaola pork loin shoulder sausage doner t-bone short ribs pork belly meatloaf shank. Turkey shank shankle shoulder pastrami chicken. Shoulder beef meatball meatloaf boudin turducken pancetta swine hamburger sausage jowl sirloin chuck. Prosciutto frankfurter t-bone corned beef beef capicola bacon chuck salami ribeye. Salami drumstick shankle ribeye jerky. Corned beef leberkas pastrami pork tenderloin bacon brisket flank frankfurter beef ribs fatback tongue swine tri-tip. Flank sirloin t-bone doner, bacon shankle chuck ham.</p>
        </div>
    </div>
</div>