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

【问题标题】：how to make card-text and horizontal list group items editable in a bootstrap card?如何在引导卡中使卡片文本和水平列表组项目可编辑？
【发布时间】：2020-06-21 19:36:13
【问题描述】：

使用引导卡片文本和水平列表组，我能够在引导卡片中显示信息，但我希望它们像引导 4 表单一样可编辑。那么，我将如何做到这一点？我提供了在 bootstrap 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>

【问题讨论】：

标签： python django bootstrap-cards

【解决方案1】：

为可编辑的项目添加引导模型Bootstrap models

【讨论】：

【解决方案2】：

<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>

这对你有用吗？

【讨论】：