gpt4 book ai didi

html - Bootstrap 模态主体挤入模态页脚

转载 作者:太空狗 更新时间:2023-10-29 14:00:32 26 4
gpt4 key购买 nike

我正在用 Bootstrap 创建一些模式.

我使用了不同的 div,如 Bootstrap component explanation 所示。 .

我遇到的情况是,当我的屏幕尺寸大于 x(表示某个未知值)时,包含我的 modal-body 的 div 被向上推(空),而包含我的 div modal-footer 吸收 modal-body 上的元素。

这是一张图片来解释我在说什么:

普通模态 normal bootstrap modal

压缩模态 enter image description here

代码是一样的,只是改变屏幕大小。

<HTML>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id='modal' class='modal-dialog'>
<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>
<h4 class='modal-title'>Change name</h4>
</div>
<div class='modal-body'>
<form id='formModal' method='post' action='giocatori.php'>
<div class='form-group col-md-12'>
<label>Name</label>
<input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
<button type='button' class='btn btn-primary'>Salva</button>
</div>
</div>
</div>
</body>
</HTML>

如果您想体验压缩模态,请运行代码片段,然后按 Full page 按钮。

如何避免挤压 body ?

最佳答案

Bootstrap 的列类旨在与行类一起使用,而不是与其他元素/类结合使用。行类和列类一起工作以确保清除 float 。试试这个:

<HTML>

<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<div id='modal' class='modal-dialog'>
<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>
<h4 class='modal-title'>Change name</h4>
</div>
<div class='modal-body'>
<form id='formModal' method='post' action='giocatori.php'>
<!-- use a row class -->
<div class='row'>
<!-- keep the col class by itself -->
<div class='col-md-4'>
<div class='form-group'>
<label>Name</label>
<input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
</div>
</div>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
<button type='button' class='btn btn-primary'>Salva</button>
</div>
</div>
</div>
</body>

</HTML>

关于html - Bootstrap 模态主体挤入模态页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34957505/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com