引导 <form> 高度答案

【问题标题】：Bootstrap <form> height引导 <form> 高度
【发布时间】：2016-10-12 10:02:56
【问题描述】：

我正在尝试使用 Bootstrap 框架在我的网站上创建一个表单，除了 Bootstrap 似乎没有计算表单的高度这一事实之外，它运行良好。我的表单后面有一个页脚，在一个单独的 div 标签中，但是当我在浏览器中查看输出时，页脚只覆盖了表单的一半。这就像 Bootstrap 没有给表单 div 一个自动高度。

代码： https://jsfiddle.net/w2s61Lfo/

**表单是包装器中的最后一个元素，页脚是我正文的最后一个元素。抱歉CSS乱七八糟，我写的乱七八糟，然后回去清理它。

输出： http://imgur.com/zOaU1iK

我还不能发布图片，抱歉！！

谢谢！

【问题讨论】：

没有代码我们帮不了你，对不起。
请提供您的表单代码，否则我们无法为您提供帮助。最好是一个可行的例子。
你不应该首先发布代码图片（当你将错误的 URL 复制到剪贴板时，这会增加三倍！）
把代码贴出来怎么样
把minimal reproducible example 放在问题本身。

标签： html css forms twitter-bootstrap

【解决方案1】：

您的置顶页脚是正确的。您的引导列使用错误...

Bootstrap 仅将容器用作包装 div 来控制内容部分的宽度，并在内容周围提供间距。

Col-xs-、col-sm- 等，- 这些只是具有一定百分比宽度的浮动元素。由于这些 div 是浮动的，因此只有当它周围有一个“行”时才会计算它们的正确高度。

row - 在其中指定了 clearfix ( CSS clear)。这样可以计算col-*高度

您的列周围必须有一行

<div class="row">
<form class="col-xs-12"></form>
</div>

这是一个工作小提琴 https://jsfiddle.net/davidsekar/qr6gecj9/1/

【讨论】：

是的，这与不正确的“推送”位置一起使用。谢谢。