Twitter Bootstrap：修复了顶部标题和侧边栏

Question

我正在尝试使用Twitter Bootstrap创建特定的布局。由于我不是CSS家伙，我无法弄清楚如何做或者甚至可能。

应该如下所示：

也许你可以帮助我。

Answer 1

假设您的左上角没有任何内容，就像您的图表一样，您可以使用以下标记... http://jsfiddle.net/abrudtkuhl/JV3bN/

注意：标记基于边栏上方没有任何内容的假设（请参阅我对您问题的评论）。我使用bootstrap的“offset”功能来移动标题。

例如：<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>