html - 如何在 Bootstrap 中一起添加单选按钮和按钮下拉菜单？

Question

你好优秀的开发者，

我正在尝试使用 bootstrap 将单选按钮和按钮下拉菜单放在一起。
就像在 bootstrap 输入组(带下拉菜单的按钮)中完成的一样。

我的唯一区别是我想放置一个单选按钮和一个标签而不是文本框。
像这样


到目前为止，我已经尝试了多种组合，但我尝试的任何解决方案都没有按照我的意愿显示。
这是我到目前为止所做的

<div class="row">
    <div class="col-3">
        <div class="input-group">
            <div style="border: 1px solid;">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                <label class="form-check-label" for="exampleRadios1">
                    Default radio
                </label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="input-group">
            <input type="radio" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>
        </div>
    </div>
</div>

到目前为止，输出是丑陋的。


我怎样才能获得与草图相关的输出？

Answer 1

像那样？

如果是，我添加了 flex-fill在 input-group-prepend为 max-width

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="input-group">
  <div class="input-group-prepend flex-fill">
    <div class="input-group-text form-control">
      <label for="" class="mb-0"><input type="checkbox" aria-label="Checkbox for following text input">Template 1</label>
    </div>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>