VueJS中如何实现表单字段在独立行分别展示

两个表单项横向并排展示，是因为包裹两个输入组的父级容器设置了flex类，Tailwind的flex布局默认沿水平方向排列直接子元素，所以两个表单项会被放在同一行。

找到class为flex justify-between的外层父容器，给它添加flex-col类，将flex布局的排列方向改为纵向，两个表单项就会自动分成两行展示。

注意：每个表单项自身的容器已经设置了flex类，会保持标签和对应输入框的横向排列效果，不会被外层的纵向布局影响。

调整后的完整代码：

<div class="bg-certstyle-background-light" slot="modal_content">
    <!-- 新增flex-col类修改排列方向 -->
    <div class="flex flex-col justify-between">
        <div class="container mx-auto flex bg-white px-6 py-4 border-b space-x-2">
            <!-- Team member 输入项 -->
            <dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="first_name">
                {{ 'Team member' }}
            </dashboard-input-label>
            <div class="col-sm-10 mb-6 w-full">   
                <input 
                    name="first_name" 
                    type="text"
                    class="form-input w-full relative z-10"
                    placeholder="Search user"
                >
            </div>    
        </div> 
        <div class="container mx-auto flex bg-white px-6 py-4 border-b space-x-2">
            <!-- Schedule name 输入项 -->
            <dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="schedule_name">
                {{ 'Schedule name' }}
            </dashboard-input-label>
            <div class="col-sm-10 mb-6 w-full">   
                <input 
                    name="schedule_name" 
                    type="text"
                    class="form-input w-full relative z-10"
                    placeholder="Schedule name"
                >
            </div>    
        </div>    
    </div>
</div>

内容的提问来源于stack exchange，提问作者Arctic Fox