我正在尝试创建一个具有更大可点击区域的下拉菜单。每当我在下拉菜单中单击但在复选框外单击时,菜单都会关闭。我如何更改 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>
最佳答案
尝试向您的 .form-check-label 和 .form-check-input 添加一些额外的填充,它们都应该是可点击的。
关于css - 下拉菜单可点击区域调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48468886/