Python 如何在引导卡中使卡片文本和水平列表组项可编辑？

使用引导卡文本和水平列表组，我能够在引导卡中显示信息，但我希望它们可以像引导4表单一样进行编辑。那么，我将如何做到这一点？我提供了在引导4卡中显示信息的代码

  <div class="personal">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Personal</h5>
        <p class="card-text">Your Personal Inforation</p>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Mobile Phone</li>
          <li class="list-group-item">{{employee.phone_number}}</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Birth Date</li>
          <li class="list-group-item">{{employee.birth_date}}</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Age</li>
          <li class="list-group-item">age</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Address</li>
          <li class="list-group-item">{{employee.address}}</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Gender</li>
          <li class="list-group-item">{{employee.gender}}</li>
        </ul>
      </div>
    </div>
  </div>

个人的
您的个人信息

移动电话
{{employee.phone\u number}


出生日期
{{employee.birth\u date}


年龄
年龄


地址
{{employee.address}


性别
{{employee.gender}

为可编辑项添加引导模型

为可编辑项添加引导模型

个人的
您的个人信息
手机
出生日期
年龄
性别
男性
女性
地址

这对你有用吗？

个人的
您的个人信息
手机
出生日期
年龄
性别
男性
女性
地址

这对你有用吗

<div class="container">
    <div class="row personal">
        <div class="col-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Personal</h5>
                    <h6 class="card-text">Your Personal Information</h6>
                </div>
                <div class="card-body">
                    <div class="col-12 col-md-9">
                        <form>
                            <div class="form-group row">
                                <label for="phone" class="col-md-2 col-form-label">Mobile Phone</label>
                                <div class="col-md-10">
                                    <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="birthdate" class="col-md-2 col-form-label">Birth Date</label>
                                <div class="col-md-10">
                                    <input type="date" class="form-control" id="birthdate" name="birthdate">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="age" class="col-md-2 col-form-label">Age</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="age" name="age" placeholder="Your age">
                                </div>
                            </div>

                            <div class="form-group row align-items-center">
                                <label for="gender1" class="col-md-2 col-form-label">Gender</label>
                                <div class="col-md-10">
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="gender1" name="gender" class="custom-control-input">
                                        <label class="custom-control-label" for="gender1">Male</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="gender2" name="gender" class="custom-control-input">
                                        <label class="custom-control-label" for="gender2">Female</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="address" class="col-md-2 col-form-label">Address</label>
                                <div class="col-md-10">
                                    <textarea class="form-control" id="address" name="address" rows="4"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>