Bootstrap 药丸问题

Question

我正在使用 Bootstrap 4 药丸来显示不同部分的表单，当我只为所有选项卡放置一些文本时它工作正常，但是当我在主页选项卡中放置一些 html 表单代码时，该表单将打印在所有选项卡中：< /p>

我想为每个标签药丸放置单独的数据。例如：每个选项卡的不同表单。

我的代码：

     <!-- Nav tabs -->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a href="" class="nav-link active" data-target="#home-pills" aria-controls="home-pills" data-toggle="tab" role="tab">Patient Details</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link" data-target="#profile-pills" aria-controls="profile-pills" data-toggle="tab" role="tab">Pre OP</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link" data-target="#messages-pills" aria-controls="messages-pills" data-toggle="tab" role="tab">Intra</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link" data-target="#settings-pills" aria-controls="settings-pills" data-toggle="tab" role="tab">Post OP</a>
            </li>
        </ul>
    
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane in active" id="home-pills">
                <form>
                    <form action='insert.php' method='post' enctype='multipart/form-data'>
                    <div class="form-group">
                        <div class="row form-group">
                        <div class="col-6">
                            <label class="control-label">Patient ID</label>
                        <input type="text" name="patient_id" class="form-control boxed" placeholder="Enter Patient ID">
                        </div>
                        <div class="col-6">
                            <label class="control-label">Date Of Surgery</label>
                            <input type="date" class="form-control boxed" name="date_of_surgery">
                            
                        </div>
                    </div>
                </form>
            </div>
      
            <div class="tab-pane fade" id="profile-pills">
                <h4>Profile Tab</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="tab-pane fade" id="messages-pills">
                <h4>Messages Tab</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="tab-pane fade" id="settings-pills">
                <h4>Settings Tab</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <!-- /.card-block -->
    </div>
    <!-- /.card -->
    </div>
    <!-- /.col-xl-12 -->
<script>
    // Select all tabs
$('.nav-tabs a').click(function(){
  $(this).tab('show');
})
</script>

它正在为所有选项卡打印患者（主页选项卡）表格。 有人可以帮忙吗？