почему CSS, загрузочный код иногда ломается

Question

Есть две вкладки (tab-one, tab-two), над которыми я работаю - одна видна, вторая скрыта. Иногда код разрывается между нижней частью tab-one и верхней частью tab-two - иногда видна некоторая часть tab-two.

Ниже фактический код обычно работает правильно

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="tab-one">
        <div class="form-group reg-form-group-mar">
            <div class="row">
                <div class="col-md-6 reg-form-col-6">
                    <div class="reg-lab-hi">
                        <label for="firstname">First Name</label>
                    </div>
                    <input type="firstname" class="form-control input-title firstname" id="firstname" name="firstname">
                    <div class="reg-err"></div>
                </div>
                <div class="col-md-6 ">
                    <div class="reg-lab-hi"><label for="lastname">Last Name</label></div>
                    <input type="lastname" class="form-control input-title lastname" id="email" name="email" >
                    <div class="reg-err"></div>
                </div>
            </div>
        </div>
    </div>    
    <div class="tab-two display-none">
        <div class="form-group reg-form-group-mar">
            <div class="row">
                <div class="col-md-6 reg-form-col-6">
                    <div class="reg-lab-hi">
                        <label for="email">Email</label>
                    </div>
                    <input type="email" class="form-control input-title email" id="email" name="email">
                    <div class="reg-err"></div>
                </div>
                <div class="col-md-6 ">
                    <div class="reg-lab-hi"><label for="password">Password</label></div>
                    <input type="password" class="form-control input-title password" id="password" name="password">
                    <div class="reg-err"></div>
                </div>
            </div>
        </div>
    </div>

И вот как код иногда ломается

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="tab-one">
        <div class="form-group reg-form-group-mar">
            <div class="row">
                <div class="col-md-6 reg-form-col-6">
                    <div class="reg-lab-hi">
                        <label for="firstname">First Name</label>
                    </div>
                    <input type="firstname" class="form-control input-title firstname" id="firstname" name="firstname">
                    <div class="reg-err"></div>
                </div>
                <div class="col-md-6 ">
                    <div class="reg-lab-hi"><label for="lastname">Last Name</label></div>
                    <input type="lastname" class="form-control input-title lastname" id="lastname" name="lastname">
                        
                        <!-- {{ code breaks here }} -->
                        <label for="email">Email</label>
                    </div>
                    <input type="email" class="form-control input-title first-name" id="email" name="email">
                    <div class="reg-err"></div>
                </div>
                <div class="col-md-6 ">
                    <div class="reg-lab-hi"><label for="email">Password</label></div>
                    <input type="password" class="form-control input-title password" id="password" name="password">
                    <div class="reg-err"></div>
                </div>
            </div>
        </div>
    </div> 

Я использую пользовательский jQuery для отображения / скрытия вкладок. Я пытался поставить ссылку на загрузку перед моим собственным CSS и наоборот;Также я пытался поместить Javascript внизу body и внизу head тегов;но ничего не работает.

Есть предложения по этому поводу?

Answer 1

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

<div class="tab-one">
    <div class="form-group reg-form-group-mar">
        <div class="row">
            <div class="col-md-6 reg-form-col-6">
                <div class="reg-lab-hi">
                    <label for="firstname">First Name</label>
                </div>
                <input type="firstname" class="form-control input-title firstname" id="firstname" name="firstname">
                <div class="reg-err"></div>
            </div>
            <div class="col-md-6 ">
                <div class="reg-lab-hi"><label for="lastname">Last Name</label></div>
                <input type="lastname" class="form-control input-title lastname" id="lastname" name="lastname">

            </div>

            <div class="reg-err"></div>
        </div>
        <div class="row">
            <div class="col-md-6">

                <div class="reg-lab-hi"><label for="email">Email</label></div>

                <input type="email" class="form-control input-title first-name" id="email" name="email">

                <div class="reg-err"></div>
            </div>
            <div class="col-md-6 ">
                <div class="reg-lab-hi"><label for="email">Password</label></div>
                <input type="password" class="form-control input-title password" id="password" name="password">
                <div class="reg-err"></div>
            </div>
        </div>

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

Примечание: Чтобы использовать их при начальной загрузке, убедитесь, что каждый контейнер назначен правильно.

Answer 2

Если хотите использовать вкладку, перейдите к приведенному ниже примеру.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
    </div>

Убедитесь, что вы добавили файлы jquery.min.js, bootstrap.min.css и bootstrap.min.js ..

Таким образом, выне нужно будет писать какую-либо дополнительную логику, чтобы она отображалась и скрывалась.