html - How to use bootstrap grid for psd not specifically made for bootstrap grid? -

html - How to use bootstrap grid for psd not specifically made for bootstrap grid? -

my question similar this: how create static psd fit responsive bootstrap grids

but selected reply (nested grid) confused me. (i can't post comments yet , thought maybe other people have more suggestions well.)

suppose given psd design of 896 px menu on left side taking 213 px , spacing of 10 px , other stuff taking 683 px. how utilize bootstrap grid that? don't want fixed-width columns. please elaborate on nested grid approach (or other approach may have).

see picture: 213px, b 896px , spacing in between 10px.

scenario 1: (what do) conform bootstrap's grid scheme 1200px main container should using. doing gives 2 desktop views (small , large) tablet , mobile view layout looking do.

this like... bare bones minimum:

<div class="container"> <div class="row"> <div class="col-sm-3"> <p>sidebar</p> </div> <div class="col-sm-1"></div> <div class="col-sm-8"> <p>main content</p> </div> </div> </div>

js fiddle: http://jsfiddle.net/tzhben/hrzbolex/

scenario 2: using 896px maximum width limit amount of different viewports see still remain responsive. did here override width of container 896px , kept same html/css.

.container { width: 896px; border: 1px solid; }

js fiddle: http://jsfiddle.net/tzhben/b9lyfzxd/

both seem work. if notice lonely "div class="col-sm-1" (in html) that's providing gap you're looking for. there may ways can take farther depending on ability manipulate css.

hope helps.

html twitter-bootstrap