Блог

Тело

         <div class="container" style="margin-top: 70px;">
          <div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-8">
            <p id="signText"> Signin Form</p>
            <div class="form-floating formPos mb-3">
              <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
              <label for="floatingInput">Email address</label>
            </div>
            <div class="form-floating formPos">
              <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
              <label for="floatingPassword">Password</label>
            </div>
            <a href="#">
              <p id="forgetPos"> Forget Password?</p>
            </a>
              <div class="form-check">
                <input class="form-check-input rememberPos" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label rememberPos" for="defaultCheck1">
                  Remember Me
                </label>
            </div>
            <button type="button" class="btn btn-success buttonPos">Login</button>
          </div>
        </div>
 

когда я пытаюсь сделать форму подходящей для мобильных пользователей и пользователей компьютеров, все в порядке, но проблема в том, что когда я уменьшаю экран btn и забываю passowrd и запоминаю меня, выхожу из своего div и создаю проблемы в дизайне

Вам также необходимо использовать классы начальной загрузки для адаптивного кодирования; например, в вашем коде вы говорите, что столбец должен занимать 8 из 12 столбцов на странице (по горизонтали). Это создает проблемы на небольших устройствах; в мобильных устройствах вам нужна вся возможная ширина устройства, а это означает, что вы должны использовать 12 столбцов из 12 возможных столбцов. Для этого просто замените класс «col-8» в div «.formlogin» на «col col-md-8». Ваш div будет выглядеть так:

   <div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-md-8 col"
 

В дополнение к приведенному выше ответу Зары, вы могли бы использовать…

 <div class="col-lg-8 col-md-12 mx-auto">
 

Мы надеемся, что это дополнит ответ Zara, сделав вашу рамку шириной 12 столбцов на мобильном устройстве, в то же время позволяя использовать 8 столбцов на больших экранах, кроме того, благодаря mx-auto эта рамка из 8 столбцов будет располагаться по горизонтали.