Question

我正在尝试使用Bootstrap 3找出图片为什么不在我们联系页面上的行中。当我最小化google chrome上的屏幕时，看起来还不错，但是当我在iPhone上查看页面时-看起来像这样：

（我可以看到堆栈图片上传功能不起作用。因此，我正在链接到--imgbb域上的图片）：

我想到的可能是下课，情况搞砸了。对于某些核心类，我必须使用前缀，因此不会影响整个站点。在这种情况下，我想在屏幕为< 768px时在页面上留出20px的空白。有人建议我将所有代码都包装成一行，因为容器在后端被调用并且具有自己的样式。

/* 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元素引起的。容器流体会应用填充，但是您可以使用填充将其取消：0;在#chrome上。您必须以不同的方式解决这一部分。

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

解决方案2：从#[derive(Clone, Copy, Debug, PartialEq)] struct S;中删除行然后将除.mk-page-header之外的所有其他行包装在.container中。

建议：在测试和搜索此类问题时，请在浏览器中使用dev-tools。这将使您的生活变得更加轻松。开发工具非常有用，功能非常强大。一旦掌握了它，就会发现没有：）

很难

希望这会有所帮助！

Answer 2

尝试用填充替换行边距，并确保将box-sizing设置为padding box，如下所示：

替换此：

<div class="mk row" style="background-color: white; --darkreader-inline-bgcolor:#212127;" data-darkreader-inline-bgcolor="">

与此：

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

通过将box-sizing设置为border-box，可以告诉它不要通过添加填充来增加其大小。另外，使用！important是不好的做法，除非您要覆盖内联样式或覆盖讨厌的选择器，否则不建议使用。

Answer 3

此CSS规则：

@media (max-width: 768px) {
    .mk .row {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

应用于具有row类的元素，该元素是具有mk类的元素的后代。因此，它不适用于此div：

<div class="mk row" style="background-color: white;">

这似乎是您的主要包装。从那里删除row类（这是IMO的首选解决方案），或用以下规则替换规则：

@media (max-width: 768px) {
    .mk.row {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

请注意，.mk和.row之间没有空格，这意味着该规则将应用于具有两者 mk和{{1 }}类。

背景图片超出了<768像素的行

3 个答案: