Menu
I'm trying to create a Twitter Bootstrap application that displays a div that shows an application at different device sizes (desktop, tablet, mobile) in our SPA with functionality existing inside and outside that needs to communicate. When clicking on the specified size, the div should resize. Like this:
The bootstrap break points are based off media queries, which are at the window level. But I'm trying to make this work on a div. If we specify a container at the div level, grid's will not stack vertically like they would if you resize the window, they just shrink.
Harder problem then it sounds like at first. :( Any ideas on how to get around this?
The easiest answer is an iFrame, so that the iFrame's window size gets resized as the div changes size and the grid stacks correctly, but thats not ideal since functionality exists in our SPA from outside and inside the div.
I would enjoy hearing a better solution to handling this!
231
You can't put something outside of <body> tag. You have to create a container div with all of your content and place the background to that div. Then your jquery box could be placed above that.
Well bootstrap has different column sizes for divs. .col-xs- .col-sm- .col-md- .col-lg- xSmall and Small and Medium and Large. These are classes for your div.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
