Bootstrap 4 在模态中调用或使用Select input WITH时，它不会最大化_Bootstrap 4_Bootstrap Modal_Jquery Select2

Bootstrap 4 在模态中调用或使用Select input WITH时，它不会最大化

bootstrap-4

Bootstrap 4 在模态中调用或使用Select input WITH时，它不会最大化,bootstrap-4,bootstrap-modal,jquery-select2,Bootstrap 4,Bootstrap Modal,Jquery Select2,下面是放置在模态中时给定语法的示例输出。是否有可能将宽度最大化到100%？我已经试过了~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

下面是放置在模态中时给定语法的示例输出。

是否有可能将宽度最大化到100%？我已经试过了~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/rjda.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newblotter"><i class="fa fa-plus-square-o fa-lg"></i>New Blotter Record</button>

    <div class="modal fade" id="newblotter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
                <!--Start Select-->
                <div class="col-md-6">
                    <div class="tile">
                      <div class="tile-title-w-btn">
                        <h3 class="title">Select2</h3>
                        <p><a class="btn btn-primary icon-btn" href="https://select2.github.io/examples.html" target="_blank"><i class="fa fa-file"></i>Docs</a></p>
                      </div>
                      <div class="tile-body">
                        <p>This plugin can be used to convert select element into advanced componant.</p>
                        <h4>Demo</h4>
                        <select class="form-control" id="demoSelect" multiple="">
                          <optgroup label="Select Cities">
                            <option>Ahmedabad</option>
                            <option>Surat</option>
                            <option>Vadodara</option>
                            <option>Rajkot</option>
                            <option>Bhavnagar</option>
                            <option>Jamnagar</option>
                            <option>Gandhinagar</option>
                            <option>Nadiad</option>
                            <option>Morvi</option>
                            <option>Surendranagar</option>
                          </optgroup>
                        </select>
                      </div>
                    </div>
                  </div>
                  <!--End Select-->
            </div>
         </div>
        </div>
    </div>


    <!-- Essential javascripts for application to work-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <!-- The javascript plugin to display page loading on top-->
    <script src="js/plugins/pace.min.js"></script>
    <!-- Page specific javascripts-->
    <script type="text/javascript" src="js/plugins/select2.min.js"></script>
    <script type="text/javascript">
      $('#demoSelect').select2({
        dropdownParent: $('#newblotter')
    });
    </script>
</body>
</html>

而且它不起作用

每当我在主体中放置Select代码时，它就完全工作了。即使选择宽度在100%时也是最大化的，但只要我把它放在模式中。从屏幕截图中可以看到，宽度大约为10%

我使用的是Bootstrap 4。

也许你可以通过css状态来实现：focus state？@AlePlo你能进一步澄清它吗？运行你在。。。给我预期的输出，如图所示。确保main.CSS和rjda.CSS中的其他CSS文件不会与引导库中的任何类冲突。

<select class="form-control" id="demoSelect" multiple="" width="100%">