没有额外的表单元素，引导表单无法呈现答案

【问题标题】：Bootstrap form not rendering without additional form element没有额外的表单元素，引导表单无法呈现
【发布时间】：2014-11-15 04:15:15
【问题描述】：

我在使用 Bootstrap 3.2.2 的模式中遇到问题。这是我的 HTML：

<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="fa fa-close"></span><span class="sr-only">Close</span></button>
                <h4 class="modal-title"><span style="padding-right:10px;" class="fa fa-envelope" aria-hidden="true"></span>E-Mail Developer</h4>
            </div> <!-- .modal-header -->
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="toEmailInput" class="col-sm-2 control-label">To</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="toEmailInput" placeholder="Enter Email" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="subjectInput" class="col-sm-2 control-label">Subject</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="subjectInput" placeholder="Enter Subject" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="messageInput" class="col-sm-2 control-label">Message</label>
                        <div class="col-sm-10">
                            <textarea class="no-resize form-control" id="messageInput" rows="5" placeholder="Enter Message"></textarea>
                        </div>
                    </div>
                </form>
            </div> <!-- .modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Send</button>
            </div> <!-- .modal-footer -->
        </div> <!-- .modal-content -->
    </div> <!-- .modal-dialog -->
</div> <!-- .modal -->

这呈现：

但是，如果我在页面的任何位置添加一个额外的标签 <form role="form"></form>，我会得到：

知道这里的幕后发生了什么巫术吗？我希望它看起来像第二张图片没有额外的表单标签。

更新 - 在查看了我之前和之后应用的 CSS 之后，似乎删除了额外的 <form> 标记也从表单本身删除了应用的 .form-horizontal 样式.我正在继续调查，但我感觉这与网站的配置方式有关。

更新 - 我发现了问题。如果没有额外的 <form> 标记，Web 应用程序中会出现一些奇怪的现象，即删除周围的 <form class="form-horizontal"> 标记，但只保留表单组。很奇怪！

更新 - 嗯，惊喜。结果我的 ASP.NET Web 表单（是的，带有<form runat="server"> 标签）去掉了“嵌套”表单元素。是的，我意识到我没有提到我正在使用网络表单，但我希望它是无关的。原来它是完全相关的！

【问题讨论】：

可能需要查看一些 CSS
在 JSFiddle 中按预期工作，所以它可能是一个 CSS“问题” - Link to fiddle
嗯...好点。这个项目有很多疯狂的 CSS 由很多其他开发人员完成，可能有几个隐藏的“宝石”。
这个浏览器是您特有的，还是在每个浏览器上都有？我们需要查看以下类的 CSS 规则：.control-label 和 .no-resize，我敢打赌问题与这些类有关，可能与内联样式有关。
@ben.kaminski 我能够跨浏览器重新创建。

标签： html forms twitter-bootstrap

【解决方案1】：

事实证明，这是由于 ASP.NET Web 窗体具有从用于回发的“主”<form runat="server"> 表单中去除嵌套的 <form> 标记的先天能力。

为了证明这一点，我将<form class="form-horizontal"> 更改为具有相同类的简单<div>，并且效果很好。

【讨论】：

太棒了！很高兴你能自己解决。根据微软的说法，ASP 和 .NET 很快就会开源，所以也许其中一些错误会得到解决。

【解决方案2】：

我能够在 JSFiddle 中重现您的问题。所以可能你应该检查你的填充和以下类的一个边距。我认为你的 CSS 覆盖了它们，所以你应该检查一下。

.modal-body {
   position: relative;
   padding: 15px;
   /*modified by me to reproduce your problem, check out where you are setting 
    the bottom padding to 0  (should be 15px)*/
   padding-bottom: 0; 
}

.form-group {
   /*modified by me to reproduce your problem, check out where you are setting 
    the bottom margin to 0  (should be 15px)*/
   margin-bottom: 0px;
}

.modal-footer {
   padding: 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
   /*modified by me to reproduce your problem, check out where you are setting 
    the bottom & right padding to 0  (should be 15px)*/
   padding-top: 0;
   padding-right: 0;
}

【讨论】：

拉米斯，谢谢。在 Chrome 中，我可以看到，在大多数情况下，这些样式正在被应用。奇怪的是，当我删除任意 <form> 元素时，.form-horizontal 被删除了。

【解决方案3】：

这是我使用您的代码的小提琴：

JSFIDDLE

我添加了一个按钮以方便使用。因为我没有引用具有“.control-label”和“.no-resize”类的样式表，所以我没有遇到同样的问题。

我真的认为您的问题在于上述两个不是 BootStrap 类的类之一。

你能分享一下这两个类的规则吗？

谢谢！

.control-label {?}
.no-resize {?}

【讨论】：