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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.