下拉菜单可点击区域调整答案

【问题标题】：Dropdown menu clickable area adjust下拉菜单可点击区域调整
【发布时间】：2018-07-06 05:42:06
【问题描述】：

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

<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>

【问题讨论】：

标签： css html twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

为了实现这一点，我在 .btn-group 和 .dropdown-menu 类中添加了宽度级别 100。它不适用于其他课程。再次在标签中，我添加了一些样式以显示边框的工作方式。

为了防止在单击时关闭下拉菜单，我包含了一个脚本来停止 停止传播

$('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});

.btn-group,
.dropdown-menu {
  width: 100%;
}

label {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 0 0 10px;
  display: block;
  width: 100%;
}

label:hover {
  background: #eee;
  cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="btn-group dropright">
      <button type="button btn-class" class="btn btn-secondary dropdown-toggle btn-block" 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">
          <label class="form-checka-label" for="inlineCheckbox1"><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
         1</label>
        </div>
        <div class="form-check form-check-inline">
          <label class="form-check-label" for="inlineCheckbox2"><input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
        2</label>
        </div>
        <div class="form-check form-check-inline">
          <label class="form-check-label" for="inlineCheckbox3"><input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
          3 (disabled)</label>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="container"></div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

【讨论】：