Bootstrap 在移动设备上定位不正确

Question

我实现了以下 bootstrap 布局：

<div>
   <div class="row">
      <!-- ********** Images **********-->
      <div class="col-sm">
         <div class="row">
            Image 1
         </div>
      </div>
      <div class="col-sm">
         <div class="row">
            Image 2
         </div>
      </div>
   </div>
   <div class="row">
      
      <div class="col-sm">
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">1</div>
            </div>
            <div class="col-10 display-23">
               Image 1 - Measurement 1
            </div>
         </div>
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">2</div>
            </div>
            <div class="col-10 display-23">
               Image 1 - Measurement 2
            </div>
         </div>
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">3</div>
            </div>
            <div class="col-10 display-23">
               Image 1 - Measurement 3
            </div>
         </div>
      </div>
      
      <div class="col-sm">
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">1</div>
            </div>
            <div class="col-10 display-23">
               Image 2 - Measurement 1
            </div>
         </div>
         <div class="row mb-2">
            <div class="col-2">
               <div class="position-absolute mr-1"></div>
               <div class="position-absolute mt-1">2</div>
            </div>
            <div class="col-10 display-23">
               Image 2 - Measurement 2
            </div>
         </div>
      </div>
   </div>
</div>

Codeply Link

桌面布局如下所示：Desktop Layout

如果切换到移动视图，它看起来像这样：Mobile view current

但是，我希望移动设备上的定位看起来像这样：Mobile view

任何人都可以帮助我并告诉我我需要做什么来更改定位以使其看起来像上一个布局示例吗？

Answer 1

我已经在您现有的布局中解决了您的问题。你可以改进布局，因为它不干净。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div>

    <div class="row">
       
      
       <div class="col-sm">
        <div class="row mb-2">
        <div class="col-sm">
            <div class="row">
               Image 1
            </div>
         </div>
         </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">1</div>
             </div>
             <div class="col-10 display-23">
                Image 1 - Measurement 1
             </div>
          </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">2</div>
             </div>
             <div class="col-10 display-23">
                Image 1 - Measurement 2
             </div>
          </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">3</div>
             </div>
             <div class="col-10 display-23">
                Image 1 - Measurement 3
             </div>
          </div>
       </div>
 
       <div class="col-sm">
        <div class="row mb-2">
            <div class="col-sm">
                <div class="row">
                   Image 2
                </div>
             </div>
             </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">1</div>
             </div>
             <div class="col-10 display-23">
                Image 2 - Measurement 1
             </div>
          </div>
          <div class="row mb-2">
             <div class="col-2">
                <div class="position-absolute mr-1"></div>
                <div class="position-absolute mt-1">2</div>
             </div>
             <div class="col-10 display-23">
                Image 2 - Measurement 2
             </div>
          </div>
       </div>
    </div>
 </div>

Bootstrap 在移动设备上定位不正确

Bootstrap positioning incorrect on mobile devices

html

responsive-design

bootstrap-4