Question

我正在使用引导程序将图像与图像右侧对齐，并且在桌面上看起来都不错，但是在移动设备上，图像被推到引导程序列的外面。我尝试了许多变通办法，但都无济于事。可能是什么原因造成的？

HTMLcode：

 <div class="container">
     <div class="row">
        <div class="col-sm-6 zee-section-col">
          <div class="col-spacer">
                 <div class="row">
                  <div class="col-sm-6">
                    <h2>Lenevo ThinkPad Laptop</h2>
                    <a href="#">Buy Now - $820</a>

                  </div>
                    <div class="col-sm-6">
                    <img class="zee-section-prod-img img-responsive" src="https://www.cpsgroup.co.uk/wp-content/uploads/2014/01/lenovo-laptop-thinkpad-e570-hero-1.png">
                  </div>

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

     </div>

  </div>

CSS：

 .col-spacer {
  -webkit-box-shadow: 0 7px 12px 5px #eee;
  -moz-box-shadow: 0 7px 12px 5px #eee;
  box-shadow: 0 7px 12px 5px #eee;
  border-radius: 15px;
  padding: 10px 20px 15px 20px;
  height: 310px;
}


.zee-section-col{
    padding-right: 2px !important;
    padding-left: 10px !important;
    padding-top: 15px !important; /* give padding top to inners*/
}

img{
  width: 100%;
}

在桌面上的外观如下：

但是图像显示在移动设备上，如下所示：

Answer 1

首先，更改CSS，删除高度限制会阻止您遇到其他问题

.col-spacer {
  -webkit-box-shadow: 0 7px 12px 5px #eee;
  -moz-box-shadow: 0 7px 12px 5px #eee;
  box-shadow: 0 7px 12px 5px #eee;
  border-radius: 15px;
  padding: 10px 20px 15px 20px;
  /* height:310px;  */
}

.zee-section-col {
    /* padding-right: 2px !important; */
    /* padding-left: 10px !important; */
    padding-top: 15px !important;
}

澄清之后，我现在知道您希望在移动设备上将“文本”放置在图像下方，但在所有其他设备上，您希望图像位于文本的右侧。

以下类表示在XS和更大屏幕上不会显示（显示：无）

d-none

但是，该类意味着sm和up的所有内容都会被显示

d-sm-block

这个类的意思是，在sm大小及以上的情况下，什么都不会显示，因此只会在xs大小上显示

d-sm-none

要执行所需的操作，请执行以下操作

<div class="container">
     <div class="row d-none d-sm-block">
        <div class="col-sm-6 zee-section-col">
          <div class="col-spacer">
                 <div class="row">
                  <div class="col-sm-6">
                    <h2>Lenevo ThinkPad Laptop</h2>
                    <a href="#">Buy Now - $820</a>

                  </div>
                    <div class="col-sm-6">
                    <img class="zee-section-prod-img img-responsive" src="https://www.cpsgroup.co.uk/wp-content/uploads/2014/01/lenovo-laptop-thinkpad-e570-hero-1.png">
                  </div>
                 </div>
          </div>
        </div>
     </div>
     <div class="row d-sm-none">
       <div class="col-12 zee-section-col">
         <div class="col-spacer">
           <div class="row">
             <div class="col-12">
               <img class="zee-section-prod-img img-responsive" src="https://www.cpsgroup.co.uk/wp-content/uploads/2014/01/lenovo-laptop-thinkpad-e570-hero-1.png">
             </div>
             <div class="col-12">
               <h2>Lenevo ThinkPad Laptop</h2>
               <a href="#">Buy Now - $820</a>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>

目前，在较小的屏幕尺寸上，未使用“ sm”类，因为移动设备的屏幕尺寸小于“ sm”类处理的尺寸，过去使用“ xs”移动设备，但是现在仅使用以下内容来设置移动样式是标准的

col-6

使用大于“ xs”的屏幕尺寸，然后使用

col-sm-6
col-md-6
col-lg-6

要在大于移动点的位置调整屏幕尺寸，请记住，移动优先：）

大概您正在使用Bootstrap 4 +

在这种情况下，请使用以下内容解决您的问题

<div class="col-sm-6" >

应该成为

<div class="col-6" >

如果您使用的是Bootstrap 3.x

<div class="col-sm-6" >

应该成为

<div class="col-xs-6" >

Answer 2

col-sm 堆栈元素用于较小的屏幕分辨率。尽管更改了屏幕分辨率， col- 值 仍会创建网格

    <div class="col-6">
         <h2>Lenevo ThinkPad Laptop</h2>
         <a href="#">Buy Now - $820</a>
    </div>


    <div class="col-6">
          <img class="zee-section-prod-img img-responsive" src="https://www.cpsgroup.co.uk/wp-content/uploads/2014/01/lenovo-laptop-thinkpad-e570-hero-1.png">
    </div>

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Bootstrap 4：修复移动设备上Div之外的图像

2 个答案: