【发布时间】：2019-03-08 04:24:49
【问题描述】：
我正在为我的项目使用引导标准媒体查询，除了小型平板电脑和横向模式外，它们运行良好。我附上了一张图片来展示这一点。我假设这是因为我的页面 ex 的许多部分都有自定义 css。边距顶部。我的客户要求使用非方形背景图像，所以为了使文本在背景图像上居中，我不得不做很多自定义 css - 这让我发疯，我以前从未处理过非方形图像.我试图对齐这些媒体查询中的所有内容，但它会以负面的方式影响另一台设备。
谁能建议如何解决这个问题？我是否需要添加其他媒体查询才能使其完美运行？
我只会添加我的媒体查询代码和价格 col 代码，因为我有很多代码用于整个网站。我还将将工作链接附加到该网站。正如我所说，它在移动纵向、ipad 纵向/横向、桌面上看起来不错，但在小型平板电脑或横向移动中却没有对齐。
// 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>
【问题讨论】：
标签： html css twitter-bootstrap responsive-design bootstrap-4