如何在 Bootstrap-4 模态对话框中创建固定位置列

Question

我正在制作一个 Bootstrap 4 模态对话。我已经有了静态的顶部（页眉）和底部（页脚），并且模态正文滚动。我想将模态体分成一个 40% 宽的左列，它也是静态的，60% 的右列滚动（主体）。

(https://i.imgur.com/INLEngZ.png)

我尝试了许多不同的静态和粘性排列，左列总是随着模态体的其余部分滚动。

<!-- Modal lightbox for bg preview and cancel/save selections -->
<div class="modal fade" id="bgSelector" tabindex="-1" role="dialog" width="100%" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form name="bgForm" id="bgForm" action="#blah" method="post">
        <div class="modal-header bg-white d-block" style="position: sticky; top: 0; z-index: 1000;">
          <button type="button" class="close float-right align-items-start" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h5 class="text-info text-center" id="modalTitle">Select background image</h5>
        </div>
        <div class="modal-body d-flex">
          <div class="column postition-sticky" style="width: 40%; border: 1px solid red;">
            <p class="w-100 text-center" style="z-index: 1000;">Select an image to use in the background...</p>
            <!-- Dynamic preview goes here -->
          </div>
          <div class="theme-list column" style="width: 60%; border: 1px solid blue;">
            <!-- Body content goes here -->
          </div>
        </div>
        <div class="modal-footer justify-content-center bg-white" style="position: sticky; bottom: 0; z-index: 1000;">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" form="themeForm" formmethod="post" formaction="#blah">Save Background Image</button>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

在该元素内创建一个子元素[可以滚动]：

 <div class="theme-list column" style="width: 60%; border: 1px solid blue;">
        <!-- Child element which can be scrolled goes here -->
    </div>

设置父元素overflow-y:scroll和固定高度，子元素应该有height:auto。

另外建议内联样式：宽度：60%；边框：1px 纯蓝色；这不是一个好主意。也许你应该把它放在 css/scss 文件中。或者最好只使用引导类。