内容在 480px 媒体查询上重叠
Content overlapping on 480px media query
我正在使用 bootstrap 3，如果您愿意的话，我有这个...描述卡片网格。问题是我为它们设置了一定的高度，以免由于一个列的内容大于另一个列的内容而以不希望的方式推动列。它按预期工作，但当视口大小小于 480px 时，问题就来了，然后内容开始重叠，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>
想通了，因为我想做的只是为描述卡设置一个特定的、不变的高度，所以我没有在 col-**-* [=17] 中添加 <div class="featureLocker"> =] divs，我将 class 添加到 col-**-* bootstrap div，因为仅设置高度不会影响水平响应其中 div 个。如果有人面临类似问题，这 似乎是 解决此特定问题的方法。谢谢大家的帮助！
我正在使用 bootstrap 3，如果您愿意的话，我有这个...描述卡片网格。问题是我为它们设置了一定的高度，以免由于一个列的内容大于另一个列的内容而以不希望的方式推动列。它按预期工作，但当视口大小小于 480px 时，问题就来了，然后内容开始重叠，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>
想通了，因为我想做的只是为描述卡设置一个特定的、不变的高度，所以我没有在 col-**-* [=17] 中添加 <div class="featureLocker"> =] divs，我将 class 添加到 col-**-* bootstrap div，因为仅设置高度不会影响水平响应其中 div 个。如果有人面临类似问题，这 似乎是 解决此特定问题的方法。谢谢大家的帮助！