-
-
Notifications
You must be signed in to change notification settings - Fork 79.1k
Closed
Description
The layout breaks at exactly 767px wide screens. The easiest example is the documentation.
- Go to https://getbootstrap.com/docs/3.3/css/#responsive-utilities-tests in Chrome or Firefox.
- Use the emulator to limit your screen width to 766 pixels (height is not relevant).
- Scroll to the green checks that show which sizes are shown and hidden (it's under Test cases).
- Check that the page works as intended (e.g. there are at least some green checks visible).
- Increase the screen width to 767 pixels.
- Check that the page breaks (e.g. there are no more checks for visible or hidden).
- Increase the screen width to 768 pixels.
- Check that the page works as intended (e.g. there are green checks visible again).
My OS is Windows 10, I've been able to reproduce this on different machines using Chrome and Firefox (I was unable to reproduce this on MS Edge).
I think this is a browser issue, but it happens in multiple browsers, so this might be another issue. (I narrowed it down to 'media queries under 768 are exclusive, media queries above 767 are inclusive', and I have a minimal html/css test page if needed). Is there a way Bootstrap can work around this issue?
In case you cannot reproduce step 6, this is what it looks like on my PC:

Reactions are currently unavailable