Bootstrap modal-body 被压缩到 modal-footer答案

【问题标题】：Bootstrap modal-body squeezed into modal-footerBootstrap modal-body 被压缩到 modal-footer
【发布时间】：2016-04-29 16:34:43
【问题描述】：

我正在使用Bootstrap 创建一些模式。

我正在使用不同的div，如Bootstrap component explanation 所示。

我遇到的是，当我的屏幕尺寸大于 x（意味着某个未知值）时，包含我的 modal-body 的 div 被向上推（空），并且包含我的 modal-footer 的 div 吸收 @ 上的元素987654330@.

这是解释我在说什么的图片：

普通模式

压缩模态

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

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

如果你想体验压缩模式，运行 sn-p 然后按下Full page 按钮。

如何避免挤压身体？

【问题讨论】：

您在表单组中使用 col-md-4。那可能是旅游问题。我无法测试它，但 4 是你的模态的 1/3。您可能有一个与引导程序冲突的类。试试 col-md-12
@Dorvalla 我刚刚修复了 col-md，问题仍然存在...谢谢您的建议

标签： html twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

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>

【讨论】：

或者只是清除页脚中的浮动。这也行。
@WitVault 有很多方法可以让事情“工作”。最好选择与手头框架语义相吻合的方式，以便其他开发人员可以轻松地使用您的代码。
我遇到了同样的问题，我添加了另一个 <div> 类 row 即 (<div class="row"> </div>)，然后将所有其他 <div class="col-md-6 col-lg-6 col-sm-6"> 移动到其中修复了页脚。