如何解决datepicker调整大小的响应问题？

Question

我正在laravel项目中设置一个新的插件datepicker

，并希望在调整为移动视图大小时解决响应问题

这是我从其网站上的datepicker创建者提供的列表中选择的定制代码：

$(function() {
        $("#input1").persianDatepicker({

            theme: 'melon',
            alwaysShow: 1,
            cellWidth: 36,
            cellHeight: 20,
            fontSize: 15,
            calendarPosition: {
            x: 0,
            y: -93,
        },
        });  

});

这是div结构，我将datepicker放在其中：

<div class="container-fluid">

    <div class="container">


            <div class="row my-4 justify-content-center">


                <div class="col-xl-3">

                    <div class="card bg-light py-4 mb-3">

                        <div class="bg-light py-5">

                            <div class="py-5 bg-light">

                                <div id="input1"></div>

                            </div>

                        </div>

                    </div>
                    <div class="card bg-primary py-4"></div>
                    <div class="card bg-primary py-4"></div>
                </div>


                <div class="col-xl-9">

                </div>                                 
            </div>  
    </div>
</div>

在笔记本电脑视图中，我的图片如下：

在移动视图（iPhone 6/7/8）中，我的图片如下：

所以我认为您可以理解我的问题

问题是，当有人在移动设备上打开我的页面时，日历向左移动，我不知道

如何告诉日历框遵循父div的大小，并且始终适合父内部的

笔记本电脑视图

有关更多信息，这是此插件的发行者：

---

Datepicker

Answer 1

添加此CSS：

#input1 {
  width: 100%;
}

或者您可以这样做：

 <div id="input1" style="width:100%;"></div>

Answer 2

尝试添加此CSS。

// only apply style on mobile
@media only screen and (max-width: 320px) {
  .pdp-default { 
    // Set calendar parent element to 100% width
    width: 100%;
    // Override inline left position set by plugin
    left: 0!important;
  }
  .pdp-default .cell {
     // set percent width of calendar date cells 7/100 = 14.28571428571429
     width: 14.28571428571429%!important;
     // Style calendar dates to stay at required aspect ratio
     height: 0!important;
     padding-bottom: 8%;
  }
}