bootstrap4でボタングループのサイズを動的に変えたい

Question

ボタングループをスマートフォンの時は横幅を100%にして、PCやタブレットのように横幅が広い時は100%では大きすぎるので小さく表示したいのですが、小さくするにはどうすればよいですか？

<div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
  <label class="btn btn-outline-primary w-100 active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked />Yes
  </label>
  <label class="btn btn-outline-primary w-100">
    <input type="radio" name="options" id="option2" autocomplete="off" />No
  </label>
</div>

---

追記

w-md-25を追加してみましたが結果は変わりませんでした。

<div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
  <label class="btn btn-outline-primary w-100 w-md-25 active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked />Yes
  </label>
  <label class="btn btn-outline-primary w-100 w-md-25">
    <input type="radio" name="options" id="option2" autocomplete="off" />No
  </label>
</div>

Answer 1

サイジングは幅によって変動するものはないので、必要なら自分でメディアクエリ対応スタイルを書かないといけなくなります。
https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

親要素に .d-md-inline-flex などを使ってレイアウトを変えることもできますが、最小幅を指定したくなるかもしれません。

<div class="btn-group btn-group-toggle d-flex d-md-inline-flex" role="group" data-toggle="buttons">

https://getbootstrap.com/docs/4.3/utilities/flex/#enable-flex-behaviors

Answer 2

w-100 ➡︎ どんな時も幅100%
w-md-50 ➡︎ 画面幅が768px以上は幅50%
上の２つをセットすると「768px以上は50%、768未満は100%」という意味になります。
こんな感じで２つセットすれば、いいと思います。

サイズに関しては以下を参考に。
V3とV4で少し定義が変わってますのでご注意を。

Comments

[KazuSaka]

この書き方できませんね！
勘違いしてました！