Question

我正在尝试使用Bootstrap 4创建一个响应式个人资料页面。问题在于，在较小的屏幕上，内容浮动在左侧，而中间和右侧部分为空。我说的是用户名，国家/地区，城市，性别，职业，职务的列。同样的问题适用于关注和消息按钮。他们看起来不应该像在移动设备上一样（在同一行）

我已在评论中添加了代码链接。

该问题仅在移动设备上发生。如何在移动设备的每一行中显示2列？另外，固定按钮位置并在同一行显示它们吗？

Answer 1

尝试以下结构。另外，引导程序4中没有col-xs-*这样的类。对于要在移动视图中应用的样式，必须使用col-*类。

Codepen link

  <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>

如何在列中修复Bootstrap 4内容响应能力？

1 个答案: