Skip to content

Navbar expand breaks at 767px #24137

@mhverbakel

Description

@mhverbakel

The layout breaks at exactly 767px wide screens. The easiest example is the documentation.

  1. Go to https://getbootstrap.com/docs/3.3/css/#responsive-utilities-tests in Chrome or Firefox.
  2. Use the emulator to limit your screen width to 766 pixels (height is not relevant).
  3. Scroll to the green checks that show which sizes are shown and hidden (it's under Test cases).
  4. Check that the page works as intended (e.g. there are at least some green checks visible).
  5. Increase the screen width to 767 pixels.
  6. Check that the page breaks (e.g. there are no more checks for visible or hidden).
  7. Increase the screen width to 768 pixels.
  8. 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:
image

Possibly related issues: #18845, #15787

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions