Bootstrap CSS - 网站页眉和页脚重叠，主要内容不可见答案

【问题标题】：Bootstrap CSS - website Header & Footer are overlapping and the main content is invisibleBootstrap CSS - 网站页眉和页脚重叠，主要内容不可见
【发布时间】：2017-04-08 17:46:52
【问题描述】：

这是网站 - http://jnnce.ac.in/jnncenew/JNNCE%20Website/

它在 PC 上可以正常工作，但在移动设备中，布局被打乱和随机放置。

我该如何解决这个问题？

【问题讨论】：

网站存在基本问题。它使用固定宽度的盒子和固定高度的盒子，不应该在 Bootstrap 站点中使用。 codeschool.com/courses/blasting-off-with-bootstrap
我现在应该如何进行？有没有办法以最小的改变来改变当前的设计？
首先您需要了解什么是 Bootstrap，以及它是如何工作的。当您这样做时，您可以更改当前设计而无需进行太多更改。例如：从.color-bar-2 中删除height: 160px;，并将标题作为响应图像放在该列中。那将修复标题。等等。

标签： html css responsive-design mobile-website

【解决方案1】：

由于您使用 Bootstrap，因此您可以使用类中的 bult 来确保网站对移动设备友好。在我看来，最好从移动网站开始（移动优先）。所以html代码应该看起来更像这样（在我看来）：

<div class="footer">
  <div class="row">
    <div class="col-md-3 col-12">
      <h5>About Us</h5>
      <h2>JNNCE</h2>
      <address></address>
      <ul></ul>
    </div>
    <div class="col-md-3 col-12">
      <h5>Usefull links</h5>
      <ul></ul>
    </div>
    <div class="col-md-3 col-12">
      <h5>University Links</h5>
      <ul></ul>
    </div>
    <div class="col-md-3 col-12">
      <h5>Facilities</h5>
      <ul></ul>
    </div>
  </div>
</div>

这样您就可以使用引导类 col 来维护移动结构。 col-12 适用于宽度小于 540 像素的所有设备，而 col-md-3 适用于所有更宽的设备。这是引导程序被广泛使用的原因之一，grid system。希望这可以帮助！干杯，史蒂文

【讨论】：