模态响应引导答案

【问题标题】：Modal Responsive Bootstrap模态响应引导
【发布时间】：2018-11-23 17:46:11
【问题描述】：

我在我的项目中遇到了我的模态问题。无论我尝试什么，文本框都不适合模态容器。另外，当我测试它时，它没有响应。我曾尝试更改 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">

这是我的模态屏幕截图：

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案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

【讨论】：