内容重叠在480px媒体查询

时间：2016-04-25 04:50:41

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

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

希望代码片段能以任何方式发挥作用。

提前致谢。

＆＃13;
＆＃13; 
@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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题