Twitter Bootstrap：固定了顶部标题和侧边栏

Question

i'm trying to create a specific layout with Twitter Bootstrap . Since i am not the CSS guy i can't figure out how to do it or if it's even possible.

It should look like this:

Maybe you can help me.

Answer 1

Assuming you want nothing in the top left like your diagram, you could use the following markup... http://jsfiddle.net/abrudtkuhl/JV3bN/

Note: The markup is based on the assumption you want nothing above the sidebar (See my comment to your question). I used the "offset" feature of bootstrap to move the header over.

Ex: <div class="span10 offset2">

Demo: http://jsfiddle.net/abrudtkuhl/JV3bN/embedded/result/

Another Note: You have to make a static height to only have the content div scrollable. In the example I used 200px as an example.

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