Question

我在项目中遇到模态困难。不管我尝试什么，文本框都不适合模式容器。另外，当我测试它时，它没有响应。我曾尝试更改css文件，但没有造成任何不同。我还提供了我的模态图片。有人可以帮我吗？

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit your profile <b>{{user.username}}</b></h4>
        <button type="button" class="close" (click)="activeModal.dismiss('Nothing was saved ')"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="edit-profile">
          <div class="container">
            <div class="row">
              <div class="span12">
                <p class="text-center">Let's get some information to make your profile stand out</p>

                <form class="" action="{% url 'update_profile' %}" method="post">
                  {% csrf_token %}

                  <div class="form-group row">
                    <div class="col-sm-4">
                      <input formControlName="first_name" name="first_name" value="{{ user.first_name }}" type="text" class="form-control" placeholder="First Name">
                    </div>
                    <div class="col-sm-4">
                      <input formControlName="last_name" name="last_name" value="{{ user.last_name }}" type="text" class="form-control" placeholder="Last Name">
                    </div>
                  </div>
                  <div class="form-group col-sm-8">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Profile Image</span>
                      <input formControlName="avatar" name="avatar" value="{{user.profile.image}}" type="text" class="form-control" placeholder="Paste URL to your avatar here">
                    </div>
                  </div>
                  <div class="form-group col-sm-8">
                    <input formControlName="adress1" name="address1" value="{{ user.profile.address1 }}" type="text" class="form-control" placeholder="Address Line 1">

这是我的模态的屏幕截图：

Answer 1

尝试添加每个人input max-width，例如此处：

 <div class="modal-body">
        <div class="edit-profile">
                <div class="container">
                    <div class="row">
                        <div class="span12" >
                            <p style="word-break:break-all;">Let's get some information to make your profile stand out</p>

                            <form class="" action="{% url 'update_profile' %}" method="post">


                                <div class="form-group row" style="tex-align:center">
                                    <div class="col-sm-4">
                                        <input
                                         formControlName="first_name"
                                         name="first_name"
                                         value="{{ user.first_name }}"
                                         type="text"
                                         class="form-control input_width"
                                         placeholder="First Name"
                                         />
                                    </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
      </div>

css：

.input_width {
  max-width: 250px;
  min-width:250px;
}

使用工作模式来摆弄输入： http://plnkr.co/edit/TRR7ZLZ1i0bGycv838bo?p=preview

模态响应式引导程序

1 个答案: