【发布时间】：2018-08-29 05:42:10
【问题描述】：
我的网站在桌面上看起来不错，但是我很难确保网站在使用 bootstrap 4 的移动设备上响应。
我正在使用我以前使用过的自定义列，它们似乎总是可以工作，但是在这个项目中，列是相互重叠的，而不是相互堆叠。
我相信这可能是因为这个项目非常具体。或者可能是因为我的 html 页面的每个 <sections> 都有背景照片。我有很多部分，所以我只会提供我的 HTML 代码的几个部分。如果有人能告诉我我的专栏是否写错了，我将不胜感激！
示例：
第 4 节的内容在移动设备上高于第 3 节的内容。
HTML：
<!--Section 3-->
<div id="content3">
<section>
<h1 class="text-center integration">Integrating</h1>
<div class="container-fluid integration_background">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<ul class="integrations">
<li><img src="img/g_suite.png" class="pr-4">
</li>
<li><img src="img/_slack.png" class="pl-4 pr-4">
</li>
<li><img src="img/groupme.png" class="pl-4 pr-4">
</li>
<li> <img src="img/microsoft.png" class="pl-4">
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<!--Section 4 -->
<div id="content4">
<section>
<h1 class="text-center">Pricing</h1>
<br>
<div class="container-fluid d-flex align-items-center" style="width: 75%;" id="price_container">
<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">
<h6 class="card-title">Use Wanzeru Ed</h6>
<hr>
<ul>
<li>Free for one class</li>
<li>Matches students in ideal teams</li>
<li>Real-time feedback</li>
</ul>
<button type="button" class="btn btn-block mt-auto" style="background-color: #2F8EE1; 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_entur.png" class="img-fluid">
<h6 class="card-title">Hire Wanzeru to be your meeting (Find word)</h6>
<hr>
<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 btn-block mt-auto" style="background-color: #2F8EE1;">$9.99/ month</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Entrepreneur</div>
<div class="card-body d-flex flex-column">
<img src="img/price_indi.png" class="img-fluid">
<h6 class="card-title">Hire Wanzeru for your business team</h6>
<hr>
<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 btn-block mt-auto" style="background-color: #2F8EE1;">Get Quotes</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
CSS：
#content3 {
background-image: url("img/back2.png");
background-size: cover;
height: 540px;
display: flex;
align-items: center;
justify-content: center;
}
.integration {
margin-top: -180px;
color: #fff;
}
.integration_background {
background-color: #fff;
text-align: center;
align-items: center;
margin-top: 30px;
padding: 10px 30px 10px 30px;
}
.vertical_line {
width: 1px;
height: 110%;
background-color: grey;
float: left;
}
#content4 {
margin-top: -120px;
}
【问题讨论】：
-
我没有看到您发布的代码有问题：codepen.io/panchroma/pen/oPLNra 您提到这只是您的 HTML 示例。您可能想要做的是尝试注释掉整个页面的部分以查看是否可以找出原因，或者将 URL 发布到整个页面。祝你好运！
-
我知道它是什么。在我的 CSS 中，每个部分和边距都有不同的高度，这就是它们相互重叠的原因。一旦我在开发者工具中去掉高度和边距，它的所有响应都非常完美。这似乎是让我的桌面保持原样并使移动设备响应媒体查询的唯一方法，这真是太糟糕了。之所以这样，是因为背景图像不是完全正方形的，它们有自己独特的形状并且是透明的。为了让一切都完美契合，我不得不改变高度和边距。
标签： html css responsive-design bootstrap-4