背景图像的行<768 px

Question

我试图弄清楚为什么图片在我们的联系页面上使用Bootstrap 3的行.当我最小化谷歌浏览器上的屏幕它看起来很好,但当我在iPhone上查看页面时 - 它正在寻找像这样:

(我可以看到Stack图片上传功能不起作用.因此我链接到域--imgbb上的图片):

我想到它可能是下面的课程,搞乱了.我必须为我使用的一些核心类使用前缀,所以我不会影响整个站点.在这种情况下,我想在屏幕上显示20px页边距< 768px.有人建议我将所有代码连续包装,因为容器在后端调用并具有自己的样式.

/* Make a 20px margin on mobile devices */
@media (max-width: 768px) {
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
}

我希望横幅上的背景图片在移动设备上占据全宽.有没有人知道如何解决这个问题？我几乎陷入困境.

我试图找出与问题无关的代码.

.mk .row [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

    
    .mk-page-header { 
        background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(https://vou.dk/Cms/333780ed-bd2b-4513-9186-af155e172a57.jpg)
        no-repeat; 
        position: relative; 
        background-size: cover; 
    }
    .mk .row {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .page-caption { 
        padding-top: 170px; 
        padding-bottom: 174px; 
    }
    .page-title { 
        font-size: 46px; 
        line-height: 1; 
        color: #fff; 
        font-weight: 600; 
        text-align: center; 
    }
    
    .card-section { 
        position: relative; 
        bottom: 140px;
        margin-bottom: -80px;
    }
    .card-block { 
        padding: 20px 80px 50px 80px;
        box-shadow: 20px 20px 50px grey;
        background-color: #fff;
    }
    .section-title { 
        margin-bottom: 40px;
    }

    .img-responsive-mk {
        width: 35% !important;
    }
   
    @media (max-width: 768px) {
        .img-responsive-mk {
            width: 100% !important;
        }
        .card-block {
            padding: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .page-title {
            font-size: 30px;
        }
        .mk-heading {
          font-size: 24px;
        }
        h2 {
            font-size: 1.5em;
        }
        h3 {
            font-size: 1em;
            text-align: center;
        }
        /* Make a 20px margin on mobile devices */
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
        /* Owerwrite the core padding on a row */
        .contact-icon .row {
          margin-left: 0px !important;
            margin-right: 0px !important;
        }
        
    }

<div class="mk row" style="background-color: white;">
 <!-- page-header -->
  <div class="mk-page-header">
      <div class="container">
          <div class="row">
              <div class="col-sm-12">
                  <div class="page-caption">
                      <h1 class="page-title">KONTAKT VORES SUPPORT</h1>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- Card Section -->
  <div class="card-section">
      <div class="container">
          <div class="card-block">
              <div class="contact-icon row">
                  <div class="section-title">
                      <h2>HAR DU SPØRGSMÅL?</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                  </div>
                  <div class="col-sm-12">
                      <div class="contact-icon row">
                          <div class="col-xs-4">
                              <a href="tel:+4512345678">
                                <img class="img-responsive-mk center-block" src="https://vou.dk/Static/Cms/6dfe32ba-7cff-443d-ab73-016dd2f6dca7.jpg"></img>
                              </a>
                              <a href="tel:+4512345678"><h3 style="text-align:center;">Ring til os</h3></a>
                          </div>
                          <div class="col-xs-4">
                              <a href="mailto:info@company.dk">
                                <img class="img-responsive-mk center-block"  src="https://vou.dk/Static/Cms/57e5b8a2-871d-487f-90e4-ae8b8d170ca2.jpg"></img>
                              </a>
                              <a href="mailto:info@company.dk"><h3 style="text-align:center;">Skriv til os</h3></a>
                          </div>
                          <div class="col-xs-4">
                              <a href="https://www.facebook.com//">
                                <img class="img-responsive-mk center-block"  src="https://vou.dk/Static/Cms/3caa853e-7da3-4e1f-9aa2-a04ee71901c9.jpg"></img>
                              </a>
                              <a href="https://www.facebook.com//"><h3 style="text-align:center;">Facebook</h3></a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

Answer 1

该问题是由您的 .container-fluid 和 #chrome 元素引起的。Container-fluid 应用填充，但您可以使用 padding: 0; 取消它 在#chrome 上。你必须以不同的方式解决该部分。

解决方案 1：我建议将 container-fluid 类移至 #front 元素。但这取决于你。但是需要 .container-fluid 来防止图像溢出，因为行的边距为负（这就是它们溢出的原因），通常最好将它们包装在容器内以防止这种情况发生。

解决方案 2：从 中删除行<div class="mk row" style="background-color: white; --darkreader-inline-bgcolor:#212127;" data-darkreader-inline-bgcolor=""> ，然后将除 .mk-page-header 之外的所有其他行包装在 .container 中。

建议：在测试和搜索此类问题时，请使用浏览器中的开发工具。它会让你的生活变得更加轻松。开发工具很棒，而且是一个非常强大的工具。一旦你掌握了它，你就会发现没有它就很难:)

希望这可以帮助！