代码之家 › 专栏 › 技术社区 › MK-DK

背景图像超出行小于768像素

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

我正试图弄明白为什么使用bootstrap 3的图片会出现在我们的联系页面上。当我最小化Google Chrome上的屏幕时,它看起来很好,但是当我在iPhone上查看页面时,它看起来是这样的:

( 我可以看到堆栈图片上传功能不工作。因此,我链接到域上的图片——imgbb ):

我有一个想法,那可能是下课,有什么乱七八糟的事情。我必须为我使用的一些核心类使用前缀,所以我不会影响整个站点。在这种情况下,我想在屏幕显示为 < 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>

3 回复 | 直到 7 年前

nejc.m 7 年前

问题是由您的.container fluid和chrome元素引起的。容器流体应用填充,但使用填充:0;on chrome取消填充。你必须用不同的方法来解决这个问题。

解决方案1:我建议将容器流体类别移动到前元件。但这取决于你。但是,为了防止图像溢出,需要使用容器流体,因为行有负边缘(这就是它们溢出的原因),通常最好将它们包装在容器中以防止这种情况发生。

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

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

希望这有帮助!

Shahar 7 年前

尝试将行边距替换为填充,并确保将框大小设置为如下所示的填充框:

替换此:

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

有了这个:

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

通过将“框大小”设置为“边框”,您将告诉它不要通过添加填充来增加其大小。另外,使用!重要的是不好的实践,除非您要覆盖内联样式或讨厌的选择器,否则不建议这样做。

brooksrelyt Ozal Zarbaliyev 7 年前

此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;">

这似乎是你的主要包装。要么移除 行 从那里类(imo是首选解决方案),或者用以下内容替换规则:

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

注意之间没有空格 .mk 和 .row ,这意味着该规则将应用于具有 二者都 这个 MK 和 行 课程。