Question

请你看一下this Demo，让我知道为什么我无法设置Bootstrap模态的高度百分比

html, body{height: 100%;}
#myModal .modal-dialog { 
    position: relative;
    width: 80%;
    height: 50%;
    left: 1%; 
}

和模态

<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>

由于

Answer 1

您正在成功设置模态对话框的高度。但是，这不是您看到的模态的一部分。您看到的部分是模态对话框内的模态内容。模态对话框高度默认为其内容的大小。除了在模态对话框中设置百分比外，您还需要将模态内容的高度设置为模态对话框的100％。

Demo here

#myModal .modal-dialog .modal-content {
  height: 100%;
}

***注意 - 这会使你的模态看起来很奇怪，因为它现在会比它的内容更大，你可能需要改变模态标题，模态体和模态页脚的高度才能很好地适应。 / p>

Answer 2

尝试以px而不是百分比设置高度。如果这样做，那么你不能将它设置为百分比的原因是因为父div没有定义的高度，所以它不能获得50％的未定义。

#myModal .modal-dialog { 
    position: relative;
    width: 80%;
    height: 150px;
    left: 1%; 
}

替代选项是定义父div的高度，以便它可以使用百分比。

希望这有帮助。

Answer 3

如果您希望模态的高度为500px，那么这就是代码。你可以按照你想要的方式调整它。我所做的就是覆盖默认值为.modal-content。您可以将其视为更改bootstrap.css文件的值。

.modal-content {
  /*then enter the height value you want here*/ 
  height:500px;
}

设置Bootstrap 3模态百分比高度的问题

3 个答案: