引导媒体查询不适用于小型平板电脑和横向模式
Posted
技术标签:
【中文标题】引导媒体查询不适用于小型平板电脑和横向模式【英文标题】：Bootstrap Media Queries are Not Working with Small Tablets and Landscape Mode 【发布时间】：2019-03-08 04:24:49 【问题描述】：我正在为我的项目使用引导标准媒体查询，除了小型平板电脑和横向模式外，它们运行良好。我附上了一张图片来展示这一点。我假设这是因为我的页面 ex 的许多部分都有自定义 css。边距顶部。我的客户要求使用非方形背景图像，所以为了使文本在背景图像上居中，我不得不做很多自定义 css - 这让我发疯，我以前从未处理过非方形图像.我试图对齐这些媒体查询中的所有内容，但它会以负面的方式影响另一台设备。
谁能建议如何解决这个问题？我是否需要添加其他媒体查询才能使其完美运行？
我只会添加我的媒体查询代码和价格 col 代码，因为我有很多代码用于整个网站。我还将将工作链接附加到该网站。正如我所说，它在移动纵向、ipad 纵向/横向、桌面上看起来不错，但在小型平板电脑或横向移动中却没有对齐。
Website link
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) ...
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) ...
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) ...
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) ...
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) ...
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px)
.intro
text-align: center;
.intro1
padding-top: 50px;
font-size: 55px;
.intro2
font-size: 55px;
.intro3
font-size: 25px;
.jumbo_features
width: 80%;
#img_prev
display: none;
#img_next
display: none;
#content4
margin-top: -230px;
.view2
background-position: center;
.price_container
height: 100%;
width: 90%;
background-color: #fff;
.card
height: 670px;
margin: 1rem;
.form-control
width: 275px;
#content6
margin-top: -60px;
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px)
.view
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
width: 100%;
height: 150%;
.jumbo_features
width: 45%;
#img_prev
display: none;
#img_next
display: none;
.integration
margin-top: 250px;
.price_container
background-color: inherit;
@media (min-width: 600px) and (max-width: 800px)
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px)
.jumbo_features
width: 80%;
.view2
background-position: center;
.integration
margin-top: 240px;
#content4
margin-top: -350px;
.price_container
width: 95%;
.card
width: 13rem;
height: 670px;
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px)
.price_container
width: 90%;
.integration
margin-top: 190px;
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px)
.price_container
background-color: #eae8f5;
background-size: cover;
border-radius: 30px;
height: 750px;
margin-top: 50px;
justify-content: center;
width: 80%;
.integration
margin-top: 140px;
<div id="content4">
<section>
<h1 class="text-center">Pricing</h1>
<br>
<div class="container-fluid d-flex align-items-center price_container text-center">
<div class="row">
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Educator</div>
<div class="card-body d-flex flex-column">
<img src="img/price_edu.png" class="img-fluid">
<h7 class="card-title"><b>Use Wanzeru Ed</b></h7>
<ul>
<li>FREE for ONE class</li>
<li>Matches students into ideal teams</li>
<li>Real-time feedback</li>
</ul>
<button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff; bottom:5px;">Get Quotes</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Individual</div>
<div class="card-body d-flex flex-column">
<img src="img/price_indi.png" class="img-fluid">
<h7 class="card-title"><b>Hire Wanzeru to be your meeting (Find word)</b></h7>
<ul>
<li>$9.99/month</li>
<li>Schedules unlimited meetings</li>
<li>Facilitates unlimited meetings</li>
<li>Takes meeting notes</li>
<li>Assigns meeting tasks</li>
<li>Sends reminders</li>
<li>Digital badging for skills</li>
</ul>
<button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;">$9.99/ month</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Business</div>
<div class="card-body d-flex flex-column">
<img src="img/price_entur.png" class="img-fluid">
<h7 class="card-title"><b>Hire Wanzeru for your business team</b></h7>
<ul>
<li>Schedules all team meetings</li>
<li>Facilitates every meetings</li>
<li>Takes meeting notes</li>
<li>Assigns meeting tasks</li>
<li>Sends reminders</li>
<li>Digital badging for skills</li>
<li>Provides real time progress reports of each team</li>
<li>Fully compliant with each business data policy</li>
</ul>
<button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;">Get Quotes</button>
</div>
</div>
</div>
</div>
</div>
</section>
【问题讨论】：
【参考方案1】：原来我需要在每张卡片上添加 col-sm-4。一旦我这样做了，就没有更多的重叠了。
【讨论】：
【参考方案2】：你说的是这个问题吗？
我查看了您的代码，问题似乎是断点设置问题。 我已经为 md 屏幕应用了一个小修复。 仅在 md 分辨率上尝试使用此 css 代码，我已经在 600px 的宽度上对其进行了测试，您需要根据断点是否低于 600px 进行一些小修复，但我认为这并不难。
// remove the width from the .cards class and set the height to 680px
.card
/* width: 17rem; */
border-radius: 30px;
height: 680px;
// remove the padding from the .cards-body class
.card-body
padding: 0;
// remove the margin from your container-fluid
.container-fluid d-flex align-items-center price_container text-center
margin: 0;
结果：
【讨论】：
以上是关于引导媒体查询不适用于小型平板电脑和横向模式的主要内容，如果未能解决你的问题，请参考以下文章