javascript - 如何阻止表单字段在 Bootstrap 表单中移动

Question

您好，这是使用 twitter Bootstrap 2.3.2 我有一个表单设置，在下拉列表的右侧有一个复选框。这个想法是，如果用户单击复选框，它将隐藏下拉列表并显示一个新的输入字段，以便用户可以输入一个新的职位头衔。

单击复选框时，它会隐藏带有标签的 div 和包含下拉列表的 div。带有新输入标签的 div 确实显示了，但表单的下一行被转移了。

http://jsfiddle.net/mwoods98/sdcs3gka/3/

另一件奇怪的事情是我将第二个隐藏的 div 设置为 .hide() 但它在加载时仍然可见，但在页面加载时，您仍然可以看到它一秒钟。

                            $(function () {
                            $('#NewPositionDiv').hide();
                            $('#NewlabelPosTitle').hide();
                            $('#fcbNewPos').change(function () {
                                if ($('#fcbNewPos').is(':checked')) {
                                    $('#PositionDiv').hide();
                                    $('#labelPosTitle').hide();
                                    $('#NewPositionDiv').show();
                                    $('#NewlabelPosTitle').show();
                                    $('#NewPositionName').focus();
                                } else {
                                    $('#PositionDiv').show();
                                    $('#NewPositionDiv').hide();
                                    $('#NewlabelPosTitle').hide();
                                }
                                    }).change();
                                });

这是隐藏 div 的 JS 代码。

提前致谢!

Answer 1

好的，我已经将 clearfix 添加到替换 DIV 的控件类中，似乎可以解决问题。