jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.77k stars 3.93k forks source link

v1.0 level is-mobile class does not seem to be horizontal any more #3797

Open larryhynes opened 1 month ago

larryhynes commented 1 month ago

This is about Bulma.

Overview of the problem

I'm using Bulma version 1.0 My browser is: Firefox / Safari / Desktop / Android I am sure this issue is not a duplicate?

Description

Since upgrading to Bulma V1.0 the level is-mobile class does not seem to stay horizontal as it used to.

Steps to Reproduce

Create a nav element with the following syntax:

<nav class="level is-mobile">
  <div class="level-left">
    <a class="level-item" href="foo.html">Foo</a>
    <a class="level-item" href="bar.html">Bar</a>
   </div>
</nav>

Expected behavior

Links will appear in a horizontal level on mobile and desktop.

Actual behavior

Links appear in a vertical level on mobile and a horizontal level on desktop.

willoma commented 1 month ago

If you remove the level-left div, it works as expected :

<nav class="level is-mobile">
    <a class="level-item" href="foo.html">Foo</a>
    <a class="level-item" href="bar.html">Bar</a>
</nav>

It has always been documented this way and I personally never tried with an intermediate level-left or level-right.

larryhynes commented 1 month ago

Hi

I hadn't tried that, thanks for the suggestion. I guess my primary point is that the markup shown used to work, and now doesn't: so I'm seeing it as either a bug (to be fixed) or a breaking change (to be accommodated), and I'd like to get a handle on which it is before I change all my existing markup, possibly unnecessarily.

(There is another issue with your proposal, which is that the elements would no longer be aligned left.)