Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: Fixed gutter width in fluid layout?

I want to have different layouts like [left|content|right] and [left|content] or [content|right] when using the fluid layout the gutter between the "cells" is also fluid and has a percentage value. But I would like to have a fixed width for the gutter like 10px or 20px between the left/right and content areas.

Any suggestion how to make this work? I've already tried it but ended always up with wildly shifting elements.

like image 665
floriank Avatar asked Mar 16 '12 14:03

floriank


1 Answers

Answered a question like this before, what it basically came down too was creating a set of classes to offset the main container depending on how many sidebars you have, like so:

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Demo, edit here.

like image 52
Andres Ilich Avatar answered Nov 11 '22 11:11

Andres Ilich