css - 下拉菜单可点击区域调整

Question

我正在尝试创建一个具有更大可点击区域的下拉菜单。每当我在下拉菜单中单击但在复选框外单击时，菜单都会关闭。我如何更改 Bootstrap 代码来调整它？我找不到调整它的行。

<div class="container-fluid">
    <div class="row">
      <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropright
    </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
            <label class="form-checka-label" for="inlineCheckbox1">1</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
            <label class="form-check-label" for="inlineCheckbox2">2</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
            <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="container"></div>
    </div>
  </div>

Answer 1

尝试向您的 .form-check-label 和 .form-check-input 添加一些额外的填充，它们都应该是可点击的。