如何阻止表单字段在 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

好的，我在替换 DIV 的控件类中添加了 clearfix 似乎可以解决问题。