ボタンとドロップダウンの幅を同じにする

Question

bootstrap4でdoropdownを作成しています
popperを使っておりますが、トグルボタンとメニューの幅を一緒にしたい(揃えたい)です
色々やってみましたが、うまくいきませんでした

<div class="dropdown col">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select from:</button>
    <ul class="dropdown-menu col">
        <a class="dropdown-item" href="#">海老</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">蟹</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">ウニ</a>
    </ul>
</div>

Answer 1

質問者さんの実現したいことは、以下のように行なえると思います(動作確認用リンク)。

<div class="dropdown col">
  <div class="dropdown-wrapper">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select from:</button>
    <ul class="dropdown-menu col">
      <li>
        <a class="dropdown-item" href="#">海老</a>
        <div class="dropdown-divider"></div>
      </li>
      <li>
        <a class="dropdown-item" href="#">蟹</a>
        <div class="dropdown-divider"></div>
      </li>
      <li>
        <a class="dropdown-item" href="#">ウニ</a>
      </li>
    </ul>
  </div>
</div>

.dropdown-wrapper {
  width: 50vw;
  min-width: 20em;
}

.dropdown-wrapper > * {
  width: inherit;
  min-width: inherit;
}