Question

我一直在弄乱这一段时间，并且完全陷入困境，试图为Bootstrap模态正确设置CSS。

问题：我想在模态的主体中显示图像，但右侧有文本。为此，我决定尝试使用Bootstrap Columns。我的模态对话框如下所示：

<div id="imageModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h3 class="modal-title" id="descModalLabel"></h3>
        </div> <!-- / modal-header -->
        <div class="modal-body">
           <div class="row">
              <div class="col-md-7 modal-image">
                 <!-- an image will be passed here -->
              </div>
              <div class="col-md-5 modal-text">
                 <!-- and text will be shown here -->
              </div>
           </div>
        </div><!-- / modal-body -->
        <div class="modal-footer" -->
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div><!-- / modal-footer -->
     </div><!-- / modal-content -->
   </div><!-- /modal-dialog -->
</div> <!--/ modal -->

我有正确加载对话框的Javascript，我的问题是设置正确的css属性以保持图像在图像列内，并且不高于模态窗体。我一直在尝试各种各样的事情，而不是找到正确的组合。

目标是一个灵活的模态，使用最多95％的屏幕高度/宽度，保持图像在列内（不高，不宽），文本有溢出设置，如果有太多我得到一个垂直滚动条（有效）。

更新：修改了CSS，为图像标记添加了类，并在发布的文本周围显示了下面的css代码中定义的内容：

  #imageModal .modal-dialog
  {
     overflow-y: initial !important;
     display: inline-block;
     text-align: left;
     vertical-align: middle;
  }

  #imageModal .modal-body
  {
     max-height: 800px;
     max-width: 1200px;
  }

  /* Image tag */
  .modal_img
  {
     max-height: 750px;
     max-width: 100%;
  }

  /* text span tag */
  .modal_txt
  {
     max-height: 750px;
     overflow-y: auto;
  }

更新：这接近我正在寻找的，文本现在有一个不移动图像的滚动条，图像似乎适合对话框，但用这个来计算不同大小的屏幕会很好。有人有经验吗？

Bootstrap列中的Bootstrap模态限制图像大小

0 个答案: