Question

我该如何调整卡上图层的高度和宽度，我希望只有关闭按钮才能工作并且所有内容都无法单击的一件事。请任何人帮我找到解决方案...

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
  <div class="modal-dialog" role="document" style="">

    <div class="modal-content" >
      <div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">
        
      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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 text-wrap" style="width: 6rem;">
      <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </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>

Answer 1

关闭按钮'x'不起作用吗？为什么？

将modal-content子div的z-index更改为 0 ，并为其添加一些高度和宽度

 <div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;width:100%;height:100%;">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
  <div class="modal-dialog" role="document" style="">

    <div class="modal-content" >
      <div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;width:100%;height:100%;">
        
      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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 text-wrap" style="width: 6rem;">
      <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </div>
      <div class="modal-footer" style="z-index:1;">
        <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>

如果您不想在模式背景中使用叠加层，请删除opacity and padding

 <div class="" style="position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
  <div class="modal-dialog" role="document" style="">

    <div class="modal-content" >
      <div class="" style="position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;">
        
      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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 text-wrap" style="width: 6rem;">
      <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </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>

Answer 2

这是您想要的吗？如果您单击顶部的closes，则只有模态X。

要通过键盘esc禁用模态或在模态之外单击，我们需要将其添加到模态div

data-keyboard="false" data-backdrop="static"

使用叠加层

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog" role="document" style="">

    <div class="modal-content">
              <div class="" style="height: calc(100% - 70px);width:100%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">


      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 1;">
      <span aria-hidden="true" >&times;</span>
    </button>
      </div>
      <div class="modal-body text-wrap" style="width: 6rem;">
        <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

无覆盖

如果您不需要任何覆盖，则可以使用此代码。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog" role="document" style="">

    <div class="modal-content">
              <div class="" style="width:100%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">


      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 1;">
      <span aria-hidden="true" >&times;</span>
    </button>
      </div>
      <div class="modal-body text-wrap" style="width: 6rem;">
        <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

如何在div上调整图层的高度和宽度

2 个答案: