css - 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>