Свернутый Bootstrap меняет положение столбца в сетке - PullRequest
Новая
       41

Свернутый Bootstrap меняет положение столбца в сетке

0 голосов
/ 12 октября 2018

Пожалуйста, кто-нибудь поможет с этой проблемой.Я использую бутстрап коллапс, чтобы свернуть div.Пока я раскрываю свернутый div, столбцы div меняют положение.Пожалуйста, смотрите скриншот ниже, чтобы понять ниже:

Свернутый Div: Свернутый Div скриншот

Когда я нажимаю на Личную информацию: она расширяется следующим образом, Это не так, как яхочу это. Расширенный скриншот div с неправильной позицией div

Но, вот как я хочу, чтобы он расширялся, так как позиции div правильные. Ожидаемый расширенный снимок экрана div-позиции

Вот мой HTML-код этого конкретного фрейма. 

   <form autocomplete="new-password" id="formid" action='' method="POST" enctype="multipart/form-data" novalidate>
<div class="overview_form_block row marl ">
   <div class="col-md-12">
      <div class="card">
         <div class="card-body">
            <div data-toggle="collapse" data-target="#collapse1" class="card-title text-center">
               PERSONAL INFORMATION
            </div>
            <div id="collapse1" class="row marl">
               <div class="col-md-6">
                  <div  class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1" class="required">Last Name{% if employment_form.last_name.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.last_name }}
                        <span class="error">{{ employment_form.last_name.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1" class="required">First Name{% if employment_form.first_name.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.first_name }}
                        <span class="error">{{ employment_form.first_name.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group ">
                        <label for="exampleInputEmail1" class="required">Social Security Number{% if employment_form.social_security_number.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.social_security_number }}
                        <span class="error">{{ employment_form.social_security_number.errors }}</span>
                     </div>
                  </div>
               </div>
               <div class="fixed col-md-6">
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1">Email Address{% if employment_form.employee_email.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.employee_email }}
                        <span class="error">{{ employment_form.employee_email.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1">Mobile Number (+46XXXXXXXXX){% if employment_form.employee_mobile.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.employee_mobile }}
                        <span class="error">{{ employment_form.employee_mobile.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1">Profile Image{% if employment_form.employee_picture.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.employee_picture }}
                        <span class="error">{{ employment_form.employee_picture.errors }}</span>
                     </div>
                  </div>
                  <br>
               </div>
            </div>
         </div>
         <div class="row marl buttons_row text-center form_btn_row">
            <button class="btn btn-default save" type="submit">Save</button>
            <a href="{% url 'employee:employee_view_employment' employment.id %}" class="btn btn-default clear">CANCEL</a>
         </div>
      </div>
   </div>
   <br clear="all">
   <input type="hidden" id="save_new_form" name="savenewform">
</div>

Почему класс коллапса начальной загрузки меняет положение моего div-столбца какдано на скриншоте.Я не хочу, чтобы позиция изменилась после расширения.Пожалуйста, помогите.

...