css - 超出最大宽度的不可点击内容

问题描述

我在 Vue 中创建了一个 datepicker 组件，我试图在标准的 Bootstrap 列布局中使用它。问题是当列小于日期选择器的选择窗口时，div 之外的任何区域都是不可点击的。所以在下图中，最右边一列的所有日期都不能选中。

扩大包装 div 确实允许点击内容，所以我知道这与日期选择器溢出超出包装器 div 最大宽度设置的边界有关。

有没有办法仍然实现图像中视觉上看到的内容，但允许在包装器外溢出的元素上检测到用户交互？

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 576px){
.col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
}}

.datepicker {
width: 300px;
}

<div data-v-44ab1ae6="" class="row">
<div data-v-44ab1ae6="" class="col-sm-3 col-12">
<div class="datepicker"></div>
</div>
</div>

标签： cssbootstrap-4flexboxoverflow

应用position: relative和z-index到 datepicker div 应该将 div 放在其他内容之上，同时保持溢出的内容可点击。

我使用 bootstrap-vue 作为标记，但最终结果应该是相同的，因为它们都使用相同的引导 CSS。

演示： https ://codepen.io/Hiws/pen/zgRmov

css - 超出最大宽度的不可点击内容

问题描述

解决方案

推荐阅读