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

Question

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

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

我该如何解决这个问题？

Answer 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>

这样您就可以使用 Bootstrap 类 col 来维护移动结构。 col-12 适用于宽度低于 540px 的所有设备，而 col-md-3 适用于所有更宽的设备。这是 bootstrap 被广泛使用的原因之一，grid system .希望这可以帮助! 干杯，史蒂文