内容在 480px 媒体查询上重叠

【问题标题】：Content overlapping on 480px media query内容在 480px 媒体查询上重叠
【发布时间】：2016-08-18 08:24:24
【问题描述】：

我正在使用 bootstrap 3，如果你愿意的话，我有这个网格......描述卡。问题是我为它们设置了一定的高度，以免由于一个内容大于另一个内容而以不希望的方式推动列。它按预期工作，但是当视口大小小于 480 像素时，问题就出现了，然后内容开始重叠，as shown in this image （抱歉是西班牙语） 我试图在（最大宽度：480px）中将高度更改为自动，但这似乎不起作用。这很奇怪，因为它适用于我之前制作的另一个类似的网格。

希望 sn-p 可以以任何方式服务。

非常感谢。

@media (max-width: 480px) {
  .navbar-toggle .icon-bar {
    width: 35px;
    margin-bottom: 9px;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: black;
  }
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-toggle {
    border: 0px;
    margin-top: 35px;
    margin-right: 30px;
    width: 50px;
    height: 50px;
  }
  .navbar-brand {
    margin-bottom: 10px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
  .power_logo {
    height: 50px;
  }
  .second_title {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #7D1424;
  }
  .jumbosubtext {
    margin-top: 50px;
    color: white;
    margin-bottom: 60px;
  }
  .locker {
    height: auto;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: auto;
  }
}
@media (max-width: 767px) {
  .navbar-toggle .icon-bar {
    width: 35px;
    margin-bottom: 9px;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: black;
  }
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-toggle {
    border: 0px;
    margin-top: 35px;
    margin-right: 30px;
    width: 50px;
    height: 50px;
  }
  .navbar-brand {
    margin-bottom: 10px;
    margin-left: 240px;
  }
  .power_logo {
    height: 50px;
  }
  .second_div {
    margin-bottom: 90px;
  }
  .second_title {
    text-align: center;
    color: #7D1424;
  }
  .third_text {
    color: #830024;
    font-family: 'Montserrat', sans-serif;
    font-weight: bolder;
    font-size: 300%;
    margin-top: 100px;
  }
  .locker {
    height: 300px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    padding-top: 50px;
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
  }
}
/*Laptop*/

@media (max-width: 991px) {
  .navbar-toggle .icon-bar {
    width: 35px;
    margin-bottom: 9px;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: black;
  }
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-toggle {
    border: 0px;
    margin-top: 35px;
    margin-right: 30px;
    width: 50px;
    height: 50px;
  }
  .navbar-brand {
    margin-bottom: 10px;
    margin-left: 240px;
  }
  .power_logo {
    height: 50px;
  }
  .navbar-brand {
    padding-top: 0;
    margin: 15px 30px;
  }
  .second_title {
    text-align: center;
    color: #7D1424;
    margin-bottom: 20px;
  }
  .locker {
    height: 300px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
  }
}
@media (max-width: 1199px) {
  .power_logo {
    width: 150px;
    height: 70px;
  }
  .nav li {
    height: 100px;
  }
  .nav li a {
    line-height: 80px;
    font-size: 18px;
  }
  body {
    margin-top: 100px;
  }
  .jumbotext {
    margin-top: 50px;
  }
  .second_title {
    text-align: center;
    color: #7D1424;
  }
  .logo {
    margin-top: 15px;
    margin-left: 20px;
    max-height: 85px;
    max-width: 200px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    margin-top: 50px;
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
  }
}
/* Large desktop */

@media (min-width: 1200px) {
  .power_logo {
    width: 150px;
    height: 70px;
  }
  .nav li {
    height: 100px;
  }
  .nav li a {
    line-height: 80px;
    font-size: 18px;
  }
  body {
    margin-top: 100px;
  }
  .logo {
    margin-top: 5px;
    margin-left: 15px;
    max-height: 90px;
    max-width: 250px;
  }
  .locker {
    height: 300px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    padding-left: 50px;
    padding-top: 200px;
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 700px;
  }
}
<div class="row">
  <div class="col-xs-12">
    <h1 class="third_text center-block">Al escojer Power Exterminators obtiene</h1>
  </div>

  <div class="col-md-6 col-lg-4 ">
    <div class="featureLocker">
      <img src="images/call.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Esmerada atención para usted</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6  col-lg-4 ">
    <div class="featureLocker">
      <img src="images/technician.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Equipo técnico altamente capacitado</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6  col-lg-4 ">
    <div class="featureLocker">
      <img src="images/tree_yellow.svg " style="height: 150px; width: 150px;" class="img-responsive   center-block">
      <h1 class="features">Productos seguros al medio ambiente</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6  col-lg-4">
    <div class="featureLocker">
      <img src="images/prize_yellow.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Calidad garantizada</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6 col-md-offset-3 col-lg-4">
    <div class="featureLocker">
      <img src="images/on_time.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Puntualidad</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
</div>

【问题讨论】：

  • 不确定这是否是疏忽，但您在 HTML 和 480 像素以上的媒体查询中使用了 featureLocker 类，但在您的 max-width: 480px 媒体查询中使用了该类locker。此外，我可能是错的，所以如果我错了，请有人纠正，但由于 CSS 的级联性质，您的 max-width: 767px 样式将覆盖上述 480px 样式，即使尺寸低于 480px。我总是采用移动优先min-width 方法，所以我不完全确定是否确实如此。我可以做一个测试 jsfiddle 并报告我猜......
  • 是的，当然。我没有出现在代码中，但是当我将其 featureLocker 设置为 height: auto 之类的东西时它仍然会发生（我认为应该覆盖其他查询中的 height: 500px）但到目前为止还没有运气
  • 好的，您似乎找到了适合您的解决方案。但是，我确实检查过，如果您按原样订购，您的 480px 媒体查询中的 height: auto 规则确实不会覆盖其他查询中的 height: 500px 规则在你的 sn-p 中，所有关于 specificity 的东西都保持不变。

标签： html css twitter-bootstrap twitter-bootstrap-3 media-queries


【解决方案1】：

想通了，因为我想做的只是为描述卡设置一个特定的、不变的高度，我所做的不是在 col-**-* 引导 div 中添加 &lt;div class="featureLocker"&gt;，而是将该类添加到col-**-* bootstrap div，因为只设置高度不会影响这些 div 的水平响应。如果有人遇到类似问题，这似乎是解决此特定问题的方法。谢谢大家的帮助！

【讨论】：

    猜你喜欢
    • 2014-10-19
    • 2013-02-28
    • 1970-01-01
    • 2012-11-18
    • 1970-01-01
    • 2021-05-30
    • 2023-03-18
    • 1970-01-01
    • 2013-04-12
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode