html – Bootstrap模态体被挤压到模态页脚_html-js-css

概述我用 Bootstrap创建了一些模态. 我正在使用不同的div,如Bootstrap component explanation所示. 我所经历的是,当我的屏幕尺寸大于x(意味着某个未知值)时,包含我的模态体的div被向上推(空),包含我的模态尺的div吸收模态体上的元素. 这是一张图片来解释我在说什么：正常模态挤压模态编码是一样的,只需更改屏幕尺寸即可. <HTML> <head> 我用 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'>&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>

如果您想体验压缩模式,请运行该片段,然后按“完整页面”按钮.

我怎样才能避免挤压身体？

解决方法 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'>&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模态体被挤压到模态页脚全部内容，希望文章能够帮你解决html – Bootstrap模态体被挤压到模态页脚所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1137463.html