Question

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

这使得： enter image description here

但是，如果我在页面中的任何位置添加了其他标记<form role="form"></form> ，我会理解这一点：

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

更新 - 看一下之前和之前应用的CSS之后，看起来删除其他<form>标记也会从表单本身中删除应用的.form-horizontal样式。我还在继续调查，但我觉得这与网站的配置方式有关。

更新 - 我发现了这个问题。如果没有额外的<form>代码，那么在网络应用中会出现一些消息正在移除周围的<form class="form-horizontal">代码，但只保留表单组。很奇怪！

更新 - 好吧，惊喜。结果我的ASP.NET Web窗体（是的，带有<form runat="server">标签）剥离＆＃34;嵌套＆＃34;形式元素。是的，我意识到我没有提到我正在使用网络表单，但我希望它是无关的。结果证明它完全相关！

Answer 1

原来这是由于ASP.NET Web Form从其＃34; master＆＃34;中删除嵌套<form>标签的先天能力。用于回发的<form runat="server">表单。

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

Answer 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;
}

Answer 3

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

JSFIDDLE

我添加了一个便于使用的按钮。因为我没有引用具有＆＃34; .control-label ＆＃34;的样式表。和＆＃34; .no-resize ＆＃34;课程，我没有得到同样的问题。

我真的认为你的问题出在上述两个不属于BootStrap类的类中。

你能分享这两个班的规则吗？

谢谢！

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

没有其他表单元素的Bootstrap表单无法呈现

3 个答案: