0

This is a tricky one. I have built a website using bootstrap and its brilliant. Brilliant for mobile/tablets. When it comes to desktop that's where the problem kicks in.

When the browser size is eg. 1000px (width of the body) then the site looks how it should. When the browser window is resized and is smaller, once it passes the sizes for tablet eg767px then the layout changes to make everything responsive.

Is there a way to keep the layout of the website exactly the same no matter what the window size, whilst being able to use bootstraps grid system?

Muhammed Bhikha
  • 4,881
  • 9
  • 36
  • 47
  • 2
    but that's the whole idea of responsive – Prisoner Sep 11 '13 at 13:37
  • I get that, but I want to use bootstrap so that it adjusts in tablets/browsers. But has a fixed layout for desktops. – Muhammed Bhikha Sep 11 '13 at 13:38
  • possible duplicate of [How to change navbar collapse threshold using Twitter bootstrap-responsive?](http://stackoverflow.com/questions/9405610/how-to-change-navbar-collapse-threshold-using-twitter-bootstrap-responsive) – Tanner Sep 11 '13 at 13:41
  • There are new ways to solve this kind of problem since Bootstrap 3. The other questioner used Bootstrap 2.0.1 and didn't wan't to switch off the responsive feature completely. So this shouldn't be a duplicate. – Tim Bartsch Sep 11 '13 at 15:54

3 Answers3

1

Did you try the new grid options? Especially .col-xs-* should help you.

Here is a little example from the docs.

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
Tim Bartsch
  • 918
  • 8
  • 18
0

You can use the media query @media handheld which is, theoretically, used only by handheld devies (phones and tablets).

See http://www.w3.org/TR/CSS2/media.html

If that doesn't work (because the phones aren't cooperating), you can substitute things like max-device-width for max-width, because browsers on phones are usually displayed full screen.

Of course there are always tablets that have the same screen size as a desktop monitor and that use windowed browsers like a desktop computer, but for those machines, do you still want to treat them differently than desktop computers?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

As mentioned by @tim-bartsch the xs (extra small) grid class col-xs-* will act the same on every screen size. This will be describe in more detail at http://getbootstrap.com/getting-started/#disable-responsive. If your layout also use a Navbar the above maybe don't help you. The instruction for this seems a little cryptic:

If using navbars, remove all navbar collapsing and expanding behavior.

In this case you could also try: https://github.com/bassjobsen/non-responsive-tb3

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224