Как исправить отзывчивость содержимого Bootstrap 4 в столбцах?

Question

Я пытаюсь создать отзывчивую страницу профиля, используя Bootstrap 4. Дело в том, что на меньшем экране содержимое плавает влево, а центральная и правая части пусты. Я говорю о столбцах имени пользователя, страны, города, пола, профессии, должности. Та же проблема относится к кнопкам Follow и message. Они не выглядят так, как должны быть на мобильном телефоне (в одной строке)

Я добавил ссылку на код в комментарии.

Эта проблема возникает только на мобильных устройствах. Как я могу показать 2 столбца в каждой строке на мобильном телефоне? Кроме того, исправить положение кнопок и показать их в одной строке?

Answer 1

Попробуйте следующую структуру. Также в начальной загрузке нет такого класса, как col-xs-*. Вы должны использовать класс col-* вместо стилей, которые вы хотите применить в мобильном представлении.

Кодовая ссылка

  <section>
  <div class="container">
    <div class="emp-profile justify-content-center">
      <form method="post">
        <div class="row">
          <div class="col-md-4">
            <div class="profile-img">
              <img src="https://picsum.photos/50" alt="" />
            </div>
          </div>
          <div class="col-md-8 col-sm-12 col-12">
            <div class="tab-content profile-tab" id="myTabContent">
              <div class="row">
                <div class="col-md-4 main-col col-sm-12  col-12 d-flex d-sm-block flex-column align-items-center">
                  <h5>
                    Kshiti Ghelani
                  </h5>
                  <h6>
                    24 Years Old
                  </h6>
                </div>
                <div class="col-md-3 col-sm-6 col-6">
                  <a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>

                </div>
                <div class="col-md-2 col-sm-6 col-6">
                  <a href="#" class="btn button-image closeButton btn-message">Message</a>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Username</label>
                  <p class="ml-auto">Kshiti123</p>
                </div>
                <div class="col-6 d-flex">
                  <label>Profession</label>
                  <p class="ml-auto">Designer</p>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Gender</label>
                  <p class="ml-auto">Female</p>
                </div>
                <div class="col-6 d-flex">
                  <label>Job Title</label>
                  <p class="ml-auto">UI Designer</p>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Country</label>
                  <p class="ml-auto">UK</p>
                </div>
                <div class="col-6 d-flex">
                  <label>City</label>
                  <p class="ml-auto">Oxford</p>
                </div>
              </div>



            </div>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-10">
            <p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
              quo minim nostro ut.
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>