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

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

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

希望该代码段可以以任何方式转换。

非常感谢。

@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>

最佳答案

想通了，因为我想做的只是为描述卡设置一个特定的、不变的高度，我所做的是而不是添加 <div class="featureLocker">在col-**-*里面 Bootstrap div，我将该类添加到 col-**-* bootstrap div，因为仅设置高度不会影响这些 div 的水平响应。如果有人面临类似问题，这似乎是这个特定问题的解决方案。谢谢大家的帮助!

关于html - 内容在 480px 媒体查询上重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36832207/

上一篇：css - Safari 中的线性渐变不起作用

下一篇：css - 一切都进入 flex 容器

相关文章：

html - 使用 flex 在 bootstrap 4 中 float 2 个 div

html - 当达到 parent 的最大高度时可滚动的 child

python - Beautifulsoup `<br>` 来自输入的标签处理

html - Bootstrap 透明面板 css 背景 : rgba won't get transparent

html - 在 HTML/CSS 中实现下拉列表

html - Bootstrap 停止动画工作

javascript - 在 JavaScript 中将多个 div 放入数组中

css - 选择中的彩色文本不适用于 chrome

javascript - 表跨越太多列？

twitter-bootstrap - Bootstrap v3.0.1.1 在干净的 VS 空项目上失败 - 如何解决？

©2024 IT工具网  联系我们