Bootstrap 靴带式莫代尔衣身与莫代尔衣脚紧密贴合

r1zk6ea1 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(132)

我正在用Bootstrap创建一些模态。
我使用不同的div，如Bootstrap组件说明中所示。
我所经历的是，当我的屏幕尺寸大于x（意味着某个未知值）时，包含modal-body的div被推高（空），而包含modal-footer的div吸收modal-body上的元素。
这是一张图片来解释我所说的：

正常模态

挤压模态

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

<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按钮。

如何避免身体被挤压

twitter-bootstrap

来源：https://stackoverflow.com/questions/34957505/bootstrap-modal-body-squeezed-into-modal-footer

2条答案

按热度按时间

aydmsdu91#

Bootstrap的column类被设计成与row类一起使用，而不是与其他元素/类结合使用。row和column类一起工作以确保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>

赞(0）回复(0）举报 2022-12-07

mtb9vblg2#

这个问题有点晚了，但我也遇到了同样的问题。解决方法是使类的形式为“form-horizontal”。

赞(0）回复(0）举报 2022-12-07