Twitter Bootstrap Respsonsive Layout: fixed size for sidebar?

2
votes

I have a respsonsive twitter bootstrap layout with a left sidebar. When I change screen resolution the sidebar and content area change their size.

Is it possible to make the sidebar (class .span3) stay in a fixed width while the content area (class .span9) changes size?

2
twitter-bootstrapresponsive-design
If you need layout element to be fixed, then you should consider not using the .span classes, which are already adjusted to be responsive to screen width changes. You'll likely need to implement your own set of classes with responsive CSS to stay in the layout grid. - VKen
Here's a tutorial that deals with this: ekdhl.net/blog/2012/10/19/… - C. E.

2 Answers

0
votes

Create a new rule that overrides .span3 only in that specific area, then add to the end of your style sheet. So -- something like this: 

.sidebar .span3 {

width: 200px !important;

}
0
votes

Instead of using bootstrap grid for sidebar use flex layout and use bootstrap grid inside the flex div.

Following is the HTML structure and CSS rules for that.

.flex-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.flex-col1 {
    width: 270px;
    display: inline-block;
}

.flex-col2 {
    flex: 2;
}

.col {
    display: inline-block;
    vertical-align: top;
}


<div class="flex-layout">
    <div class="col flex-col1">
        //here will be nav
    </div>
    <div class="col flex-col2">
        //here will be bootstrap grid
    </div>
</div>