点击select2时自动出现水平滚动条

The horizontal scroll bar automatically appears when clicking select2

我使用 select2 和 bootstrap。每次单击 select2 时,我的页面都会展开并出现一个水平滚动条。 如何解决这个问题:

这是我的HTML代码

<div class="row">
  <div class="col-md-12">
     <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select>
  </div>
</div>

这是我的 JS 代码

    $(document).ready(function() {
        const url = "/ajax/categories";
        $('#js-data-example-ajax').select2({
            ajax: {
                url: url,
                dataType: 'json',
                data: function (params) {
                    const query = {
                        keyword: params.term,
                        page: params.page || 1,
                        limit: 10
                    }
                    return query;
                }
            }
        });
    });

试试这个正文{overflow-x:hidden;}