分类导航

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – Bootstrap模态体被挤压到模态页脚，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我用 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>