btnの右寄せを常に反映したい

Question

btnの右寄せ

<section class="container ml-0 d-none d-lg-block">
      <nav class="navbar navbar-expand navnar-light">
        <a href="" class="navbar-brand"><img alt="ブランド" src="img/logo.png" width="50" height="50"></a>
        <ul class="navbar-nav">
            <li class="nav-item active"><a href="" class="nav-link font-weight-bold text-dark">概要</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-dark">準備</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-dark">安全</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-dark">マネープラン</a></li>
            <!-- <li class="nav-item"><a href="" class="nav-link btn btn-danger">はじめる</a></li> -->
          </ul>
        <a href="" class="nav-btn btn btn-sm bg-danger text-white ml-auto">はじめる</a>
      </nav>
    </section>

btnにmargin:0 0 0 auto;のように設定してもブラウザ幅を広げると、画像のように右に隙間が生まれてしまい、常に右寄せになってくれません。
なにか解決方法はないでしょうか？

Comments

[hatena19]

クラス名をみると Bootstrap のもののようですが、Bootstrapを使ってますか。
使っているなら、タグに Bootstrap を追加してください。

Answer 1

<section class="container ml-0 d-none d-lg-block"> で container と ml-0 を設定してますが、それぞれの意味を理解していますでしょうか。

Bootstrap でのコンテナの利用 (continer と container-fluid の違い) - Bootstrapの使い方

空白ユーティリティ～Bootstrap4移行ガイド

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">

Comments

[sshino]

細かく説明して頂いて有難うございましたm(_ _)m

Answer 2

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).

Overview · Bootstrap

Bootstrapのドキュメントによると、fluid-widthを選択しない場合は、各ブレイクポイントで定められた横幅になるようです。

Responsive breakpoints | Overview · Bootstrap

Answer 3

btnにright:○○pxを設定してみてはいかがでしょうか？