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。希望这可以帮助！干杯，史蒂文

Bootstrap CSS - 网站标题＆amp;页脚重叠，主要内容不可见

1 个答案: