Bootstrap列无法用于切换hide/show

Question

我正在使用bootstrap 4.3.1，我正在尝试在2个Divs，一个显示和另一个生皮之间切换。

除了Divs内部外，一切都很好，这是Bootstrap Cols，在最初隐藏的DIV上不起作用。这些似乎与CSS有关以隐藏1st Div(显示：无;(

so -form1始于隐藏，form2是可见的。
单击按钮，然后切换。

这起作用，但form1显示了
等等等等等等等等等等等等

而不是3个colums(Col-Md-4(等等等等等等等等

这是我的代码：

$('.togglebutton').on('click', function (e) {
        var frm = $(this).closest('.frm');
        frm.find('.form1').toggle(200, 'swing');
        frm.find('.form2').toggle(200, 'swing');
        });

.hidden {display:none !important;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" integrity="sha256-D9AvR0EzkNZoWZVSvI3ch+uf/Z5izrIpcbsykVphwPU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css" integrity="sha256-dARYuC3pd0wa/7R4Hkt/sR2zfLHCgbnVAQ2sPwhNe0A=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row frm">  
        <div class="row form1 hidden">  
            <div class="col-md-4">  
			    1blah blah  
		     </div>
		    <div class="col-md-4">
			    1blah blah
		    </div>
		    <div class="col-md-4">
			    1blah blah
		    </div>
	    </div>
	    <div class="row form2">
		    <div class="col-md-4">
			     2blah blah
		    </div>
		    <div class="col-md-4">
			    2blah blah
		    </div>
		    <div class="col-md-4">
			    2blah blah
		    </div>
	    </div>
    </div>
<button class="btn btn-outline-success togglebutton" type="submit">Edit</button>

我在上面尝试了此方法
我尝试使用Bootstrap的'.d-none'而不是" .hidden"
使用jQuery
使用"崩溃"(这些divs是页面上许多列表的一部分，因此常规崩溃将无效(

在所有这些情况下

任何想法都受到赞赏

Answer 1

将 row类添加到每个表单div。

n.p 1：我将列的大小更改为小，只是为了适合片段的大小，您不必这样做。

n.p 2：我已经更改了JS代码以使示例中的切换按钮工作。

$(".togglebutton").on("click", function(e) {
    $(".form1").toggleClass("hidden");
    $(".form2").toggleClass("hidden");
  });

.hidden {display:none !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<button class="togglebutton">TOGGLE ME!!</button>
<div class="frm">  
        <div class="form1 row hidden">  
            <div class="col-sm-4">  
			    blah blah1  
		     </div>
		    <div class="col-sm-4">
			    blah blah1
		    </div>
		    <div class="col-sm-4">
			    blah blah1
		    </div>
	    </div>
	    <div class="form2 row">
		    <div class="col-sm-4">
			     blah blah2
		    </div>
		    <div class="col-sm-4">
			    blah blah2
		    </div>
		    <div class="col-sm-4">
			    blah blah2 
		    </div>
	    </div>
    </div>