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

时间:2018-11-06 16:31:49

标签: bootstrap-4

有没有办法在“ 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>

编辑,一些屏幕截图:

我想要什么:

What i want

我得到的是

what i get

1 个答案:

答案 0 :(得分: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