bulmaにてブラウザのサイズを小さくしても大きい状態と同様のレイアウトにしたい

前提・実現したいこと

Bulmaのフレームを使いNavbarを製作中です。

上の画像の様なレイアウトにしたいと思っておりブラウザのサイズが大きい場合(>=1024px)では実装できています。
実現したいデザインは、左右に余白が出来ている状態でかつ真ん中部分にも余白がある状態です。

しかし、下の画像の様にブラウザのサイズを小さくすると右側にあった二つのボタンがロゴの所に近づいてきてしまいます。
また、左右の余白なども無くなってしまう状態です。

該当のソースコード

js
1      <div class="container is-max-desktop">
2        <div class="py-3 navbar-brand" >
3          <a class="navbar-item" href="https://bulma.io">
4            <img src="https://bulma.io/images/bulma-logo.png" width="120" height="120" />
5          </a>
6          <div class="navbar-end">
7            <div class="navbar-item">
8              <div class="buttons">
9                <a class="button is-info is-expanded is-block">
10                  <Link to="/signup" style={{ color: 'white' }}>Sign Up</Link>
11                </a>
12                <a class="button is-light">
13                  <Link to="/login" style={{ color: 'black' }}>Login</Link>
14                </a>
15              </div>
16            </div>
17          </div>
18        </div>
19      </div>

Bootstrapのテンプレートでのやりたいことは下の画像です。

補足情報（FW/ツールのバージョンなど）

bulma:v0.9.3 React:v17.0.2

現状

現在の所、別にCSSを書いている訳ではありませんが上のデザインを実現するためにはフレームワークだけでなくコードを書く必要がありますでしょうか？それともフレームワークのclassを変更すればデザイン可能でしょうか？ご指導の程よろしくお願いします。

Lhankor_Mhy

2021/09/29 00:40

つまり、画面サイズが小さくなったら文字や画像も小さくしたい、というご質問ですか？

退会済みユーザー

2021/09/29 02:05

Lhankor_Mhy様。質問の意図が上手く伝えられなくてすみません。画面サイズを小さくしてもパーツの位置(ロゴやボタンの位置)を固定したいという事です。現状、サイズを小さくしてしまうとパーツの位置がずれてしまいます。よろしくお願いします。

Lhankor_Mhy

2021/09/29 02:10

つまり、小さい画面では横スクロールするようにしたい、ということですか？

退会済みユーザー

2021/09/29 02:16

Lhankor_Mhy様。スクロールしたいという訳ではなくて、ブラウザのサイズを1024px以下にした際にもボタンの位置を右側に固定したいという事です。現状上の写真を見て頂いても分かる通り、左のロゴの右側にボタンがあると思うのですがそれをnavbar全体の右側にしたいという事です。よろしくお願いします。

Lhankor_Mhy

2021/09/29 02:41

わかりました。 Link という要素があるようですが、これはHTMLではないと思いますが、なにかフレームワークなどをお使いですか？

退会済みユーザー

2021/09/29 02:47

Lhankor_Mhy様 Reactを使っています。記載を忘れていた為追記します。よろしくお願いします。

Lhankor_Mhy

2021/09/29 02:51

なるほど。 Linkコンポーネントが展開するHTMLについては気にしなくていいですか？

退会済みユーザー

2021/09/29 05:52

Lhankor_Mhy様はい。大丈夫です。

行動規範の内容に同意します

回答1件

ベストアンサー

お手軽にアドホックな解決をするには、以下のようにするといいかもしれません。

HTML
1<div class="navbar-end ml-auto">

ただ、別の部分で影響が出る可能性はあります。

また、左右の余白については、Bluma の tablet ブレイクポイントでは Full width となっているので、PC用のブレイクポイント同様にmax-widthを設定するか、あるいはmx-4などとして固定マージンを設定するのもいいかもしれません。（上記同様に、別の部分で影響が出る可能性があります。）

ご質問を拝見する感じですと、tablet ブレイクポイントのレイアウトがご希望に合わないご様子ですから、本質的な解決には、sass変数をいじってコンパイルし直した方がいいのかもしれません。

Variables | Responsiveness | Bulma: Free, open source, and modern CSS framework based on Flexbox

投稿2021/09/29 03:09

編集2021/09/29 03:11

Lhankor_Mhy

総合スコア36960

退会済みユーザー

2021/09/29 05:51

Lhankor_Mhy様教えて頂きありがとうございます！思った通りのレイアウトになりました！ちなみにですが左右の余白を作りたいためにis-max-desktopを付けたのですがこれ以外の方法があったりするのでしょうか？また、ブラウザのサイズを小さくするとPCでもtabletのブレイクポイントになるのでしょうか？よろしくお願いします。