设置bootstrap modal模态框的宽度和宽度

ゝ一世哀愁。 2021-06-26 16:06 907阅读 0赞

(1)修改宽度可以通过修改`modal`中的`modal-dialog`这个`div`宽度实现

(2) 修改高度和宽度最好的办法是修改`modal-body`中添加的控件，设置控件的大小，`modal`会自动适应。

例如

<div class="modal fade in" id="_modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalLabel" style="display: block;">
      <div class="modal-dialog" role="document" style="width: 680px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="modalLabel">选择移动到的目录</h4></div>
          <div id="_modalDialog_body" class="modal-body">
                
            <div id="selectTree" class="ztree" style="height:300px;overflow:auto; "> 
            </div>
     
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

显示效果图  
![在这里插入图片描述][20181231152446820.jpg]

--------------------

## Bootstrap模态框`modal`的高度和宽度设置 ##

### （1）高度 ###

将`style=“height:900px”`放在`<div class = "modal-dialog">`或者更外层上，整个模态框的高度不会发生变化 如下图所示：  
![在这里插入图片描述][20181231152849680.png]

将`style=“height:900px”`放在`<div class = "modal-content">`上，是将整个模态框（包括头部、中间、末尾）设置为高度为`900px;`如下图所示：  
![在这里插入图片描述][20181231152956478.png]

若将`style=“height:900px`放在`<div class = "modal-header">`、`<div class = "modal-body">`、`<div class = "modal-footer">`会引起对应部分高度变化如后面图片：  
![在这里插入图片描述][20181231153656605.png]![在这里插入图片描述][20181231153713320.png]![在这里插入图片描述][20181231153729284.png]  
（2）宽度

将`style=“width:900px”`放在`<div class = "modal-dialog">`会引起整个模态框的宽度发生变化，且模态框如原先居中显示，如下图所示：  
![在这里插入图片描述][20181231153940790.png]

将`style=“width:900px”`放在`<div class = "modal-content">`会引起整个模态框的宽度发生变化，且模态框如不居中显示，感觉很怪，如下图所示：  
![在这里插入图片描述][20181231154213379.png]

将`style=“width:900px”`放在`<div class = "modal-header">`、`<div class = "modal-body">` `<div class = "modal-footer">`会引起整个模态框对应部位宽度发生变化，感觉很怪  
![在这里插入图片描述][20181231154622824.png]![在这里插入图片描述][20181231154700372.png]  
![在这里插入图片描述][20181231154638736.png]

[20181231152446820.jpg]: /images/20210626/fddac1f5235a4f5a99a59efa0f2268ce.png
[20181231152849680.png]: /images/20210626/eba77014bc47452ab7eecdd8130da7dc.png
[20181231152956478.png]: /images/20210626/6db938e321ed46f2917511694a29aa58.png
[20181231153656605.png]: https://img-blog.csdnimg.cn/20181231153656605.png
[20181231153713320.png]: https://img-blog.csdnimg.cn/20181231153713320.png
[20181231153729284.png]: /images/20210626/195774d37b5648e4ae57ae37f58301a1.png
[20181231153940790.png]: /images/20210626/4825138035c64a3698c834f44a52570d.png
[20181231154213379.png]: /images/20210626/2a43a0cf072342598d2345322cc5ee94.png
[20181231154622824.png]: https://img-blog.csdnimg.cn/20181231154622824.png
[20181231154700372.png]: /images/20210626/d5d47ce365e64da995b00c2255914756.png
[20181231154638736.png]: /images/20210626/15fd323b98124016aa4d56954bee8a31.png