html – Bootstrap模态体被挤压到模态页脚
发布时间:2020-12-14 18:28:04 所属栏目:资源 来源:网络整理
导读:我用 Bootstrap创建了一些模态. 我正在使用不同的div,如Bootstrap component explanation所示. 我所经历的是,当我的屏幕尺寸大于x(意味着某个未知值)时,包含我的模态体的div被向上推(空),包含我的模态尺的div吸收模态体上的元素. 这是一张图片来解释我在说什
我用
Bootstrap创建了一些模态.
我正在使用不同的div,如Bootstrap component explanation所示. 我所经历的是,当我的屏幕尺寸大于x(意味着某个未知值)时,包含我的模态体的div被向上推(空),包含我的模态尺的div吸收模态体上的元素. 这是一张图片来解释我在说什么: 正常模态 挤压模态 编码是一样的,只需更改屏幕尺寸即可. <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'>×</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> 如果您想体验压缩模式,请运行该片段,然后按“完整页面”按钮. 我怎样才能避免挤压身体? 解决方法
Bootstrap的列类旨在与行类一起使用,而不是与其他元素/类结合使用.行和列类一起工作以确保浮动被清除.试试这个:
<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'>×</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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |