Fatal编程技术网
  • html/
  • Html 引导模式内容未填充模式正文

Html 引导模式内容未填充模式正文

html css twitter-bootstrap

Html 引导模式内容未填充模式正文,html,css,twitter-bootstrap,bootstrap-modal,Html,Css,Twitter Bootstrap,Bootstrap Modal,对于可能出现的多余问题，我深表歉意，但搜索“填充”之类的关键字并不能真正解决手头的问题 我很难让引导模态实体的内容填满整个实体的空间 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.

对于可能出现的多余问题，我深表歉意，但搜索“填充”之类的关键字并不能真正解决手头的问题

我很难让引导模态实体的内容填满整个实体的空间

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="container-fluid">

            <div class="form-row">
              <div class="col-md-8">
                <button class="btn btn-outline-secondary" data-toggle="modal" data-target="#benchmarkModal" id="benchmark">Select Benchmark</button>
              </div>
            </div>

        <!-- Modal -->
        <div class="modal fade" id="benchmarkModal" tabindex="-1" role="dialog" aria-labelledby="benchmarkModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="benchmarkModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="select-menu">
                  <select multiple class="form-control">
                    <option value="test_1" selected"=selected">test_1</option>
                    <option value="test_2" selected"=selected">test_2</option>
                    <option value="test_3" selected"=selected">test_3</option>
                    <option value="test_4" selected"=selected">test_4</option>
                    <option value="test_5" selected"=selected">test_5</option>
                    <option value="test_6" selected"=selected">test_6</option>
                    <option value="test_7" selected"=selected">test_7</option>
                    <option value="test_8" selected"=selected">test_8</option>
                    <option value="test_9" selected"=selected">test_9</option>
                    <option value="test_10" selected"=selected">test_10</option>
                    <option value="test_11" selected"=selected">test_11</option>
                    <option value="test_12" selected"=selected">test_12</option>
                    <option value="test_13" selected"=selected">test_13</option>
                    <option value="test_14" selected"=selected">test_14</option>
                    <option value="test_15" selected"=selected">test_15</option>
                    <option value="test_16" selected"=selected">test_16</option>
                    <option value="test_17" selected"=selected">test_17</option>
                    <option value="test_18" selected"=selected">test_18</option>
                    <option value="test_19" selected"=selected">test_19</option>
                    <option value="test_20" selected"=selected">test_20</option>
                  </select>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
我所要做的就是让selectmultiplemenu填充整个模态体，我不知道怎么做

下面是JSFIDLE：（拉伸结果框以更好地了解正在发生的事情）

我感觉您的自定义CSS可能无法工作。你能检查并确认你是否正确链接了你的自定义css吗？是的，我正确链接了它，因为没有80vh属性，模态会缩小到选择多个部分的大小。通过包含css，模态本身会展开，但“选择多个”部分不会展开 
.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80vh;
}

.modal-dialog {
    height: 80vh;
}
.modal-content{
  height:100%;
}

.select-menu {
    position: absolute;
    right: 1rem;
    left: 1rem;
    top: 0;
    bottom: 0;
    height: 100%;
}
.select-menu .form-control{
  height:100%;
}