我的输入组前缀中的复选框按钮

Question

有没有办法在“ input-group-prepend”中制作一个“ checkbox button”，并使它看起来很合适？ 尝试过：

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input type="checkbox" autocomplete="off"> Checked
  </label>
</div>

但它不适合：

<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>

我想更多的背景信息

<div class="input-group mb-3">
        <div class="input-group-prepend">

          <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary">
              <input type="checkbox" autocomplete="off"> Checked
            </label>
          </div>

        </div>
        <input value="<?php echo($this->session->userdata('fname')) ?>" name="fname" type="text" class="form-control" aria-describedby="fname">
      </div>

编辑，一些屏幕截图：

我想要什么：

我得到的是

Answer 1

工作解决方案：

<div class="input-group mb-3">
  <div class="input-group-prepend btn-group-toggle" data-toggle="buttons">
    <!-- merged .input-group-prepend and .btn-group-toggle divs -->
    <label class="btn btn-outline-secondary">
      <input type="checkbox" autocomplete="off"> Checked
    </label>
  </div>
  <input value="foo" name="fname" type="text" class="form-control" aria-describedby="fname">
</div>

JSFiddle