Q&A
クラス名をみると Bootstrap のもののようですが、Bootstrapを使ってますか。
使っているなら、タグに Bootstrap を追加してください。
btnの右寄せ
CSS
1<section class="container ml-0 d-none d-lg-block"> 2 <nav class="navbar navbar-expand navnar-light"> 3 <a href="" class="navbar-brand"><img alt="ブランド" src="img/logo.png" width="50" height="50"></a> 4 <ul class="navbar-nav"> 5 <li class="nav-item active"><a href="" class="nav-link font-weight-bold text-dark">概要</a></li> 6 <li class="nav-item"><a href="" class="nav-link font-weight-bold text-dark">準備</a></li> 7 <li class="nav-item"><a href="" class="nav-link font-weight-bold text-dark">安全</a></li> 8 <li class="nav-item"><a href="" class="nav-link font-weight-bold text-dark">マネープラン</a></li> 9 <!-- <li class="nav-item"><a href="" class="nav-link btn btn-danger">はじめる</a></li> --> 10 </ul> 11 <a href="" class="nav-btn btn btn-sm bg-danger text-white ml-auto">はじめる</a> 12 </nav> 13 </section>
btnにmargin:0 0 0 auto;のように設定してもブラウザ幅を広げると、画像のように右に隙間が生まれてしまい、常に右寄せになってくれません。
なにか解決方法はないでしょうか？
回答3件
0
ベストアンサー
<section class="container ml-0 d-none d-lg-block"> で container と ml-0 を設定してますが、それぞれの意味を理解していますでしょうか。
Bootstrap でのコンテナの利用 (continer と container-fluid の違い) - Bootstrapの使い方
btn自体は、ml-auto が設定されていることで親要素内で右寄せにできています。
continer に ml-0（左マージン0）が設定されていることで、continer 自体か左寄せになっているために右側の余白か大きくなります。
ご希望のことは、下記の２つのどちらかだと思います。
containerの幅の中でbtnを右寄せ
<section class="container d-none d-lg-block">
containerを画面幅に広げてbtnを右寄せ
<section class=" container-fluid d-none d-lg-block">
投稿2020/05/15 05:08
編集2020/05/15 05:10総合スコア34084
0
Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
Bootstrapのドキュメントによると、fluid-widthを選択しない場合は、各ブレイクポイントで定められた横幅になるようです。
投稿2020/05/15 04:56
総合スコア36981
0
btnにright:○○pxを設定してみてはいかがでしょうか？
投稿2020/05/15 03:57
総合スコア11
あなたの回答
tips
プレビュー
